CSS Fonts

Prev
Next
CSS Font Property

CSS fonts

There are multiple CSS fonts properties to style the fonts. The important properties are –

  • font color
  • font size
  • font variant
  • font weight
  • font family
  • font style
  • font spacing
CSS Font cheat sheet

Font-color

The ‘color’ property sets the color of the fonts or texts.

It is a good practice to define Background color when you define font-color as per the W3C standard.

CSS Font color

Syntax to set the font-color of a text:
color: color-name;
Where color-name can be like –

  • An actual color name like red, blue, powderblue, tomato, aqua etc
  • A hexadecimal code value of the color. Example – #f1f1f1
  • In terms of RGB which stands for Red, Green, and Blue. Example, RGB(0,0,1)
  • In terms of hsl value.

Example of font color

<style>
.font_color {
  color:blue;
  background-color:orange;
}

.font_color_hex {
  color:#f1f1f1;
  background-color:red;
}
</style>
Run the Code

Font Size

By using the CSS ‘font-size‘ property, you can set the size of the font. 

It is a good practice to define Background color when you define color of the text.

css font size property

Font-size can use multiple units like px, em, %, small, medium, large, inherit, unset, initial etc. By default the size of text is 16px and 16px=1em.

W3C recommends to use em for font-size which allows users to its resize the text as per the browser.

Some web developers do not want to use em, because this needs to be calculated first. (1em=16px) so they use px(pixels) and it is a good practice to set the text size in pixels because it gives you strong control over the size of the text.

Some web developers also use vw(viewport width) which adjusts the font-size according to the size of the browser window. You need to adjust your browser size to visualize and understand this.

Syntax to set the font-size:
font-size: different-size-units;

Some Examples of Font Sizes:
font-size:14px;
font-size:1.2em;
font-size:4vw;
font-size:60%;
font-size:small;
font-size:smaller;
font-size:x-small;
font-size:xx-small;
font-size:medium;
font-size:large;
font-size:larger;
font-size:x-large;
font-size:xx-large;
font-size:inherit;
font-size:unset;
font-size:initial;

Simple Example of font-Size

<style>
#font_size {
  font-size: 24px;
}
</style>
Run the Code

Example of different Font Sizes

<style>
  .px {
	font-size: 30px ;
}
  .em {
	font-size: 1.2em;
}
  .vw {
	font-size: 2.5vw;
}
  .percent {
	font-size: 70%;
}
  .small {
	font-size: small;
}
  .smaller {
	font-size: smaller;
}
  .x-small {
	font-size: x-small;
}
  .xx-small {
	font-size: xx-small;
}
  .medium {
	font-size: medium;
}
  .large {
	font-size: large;
}
  .larger {
	font-size: larger;
}
  .x-large {
	font-size: x-large;
}
  .xx-large {
	font-size: xx-large;
}
</style>
Run the Code

Font Variant

By using the the ‘font-variant‘ property, you can set a small cap font for a particular text.

Syntax to set the font-variant:
font-variant: small-caps | normal;

Simple Example of font-variant

#font_variant {
  font-variant: small-caps;
}
Run the Code

font size responsive

It is good to create responsive font size which adjusts according to the size of the browser.

To create responsive font size, use ‘VW’ unit for texts. This stands for viewport width.

The other way to create responsive texts is by using Media Queries. We will not discuss media queries on this page but will learn it in detail as we proceed further.

This font is very Big

Reduce your device screen size to make font size small.

Note/Info:

To make responsive texts and responsive web design, it is always a good practice to include meta name property using <meta> tag –

For Example:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
                                 or
<meta name=”viewport” content=”width=device-width”>

Example of responsive font Size

<style>
#non_repsonsive {
    Background-color:aqua;
    padding:5px;
}
#font_size_responsive {
  Background-color:tomato;
  padding:5px;
  color:white;  
  font-size: 2vw;
}
</style>
Run the Code

font-size adjust

Font Size Adjust property adjusts the font size based on the height of small case letters, not the CAPITAL letters.

Syntax to set the font-size-adjust:
font-size-adjust: adjust-value|initial|inherit|unset|none;

Example:
font-size-adjust: 0.6 /*this means that the size of the lowercase letter in the text will be 60% of the original size */

adjusting font-size in CSS

Example of adjusting font-size

<style>
#font_size_adjust {
   font-size: 20px;
   font-family:verdana, Tahoma, Comic Sans MS;
   font-size-adjust: 0.60;
}
</style>
Run the Code

font weight

Font-weight defines the font boldness or density of the text.

The font-weight controls the thickness or compactness or heaviness of the text.

CSS Font weight properties

Syntax of font-weight:
font-weight:normal;    /*Normal weight of the font */
font-weight:lighter;    /*Lighter weight of the font */
font-weight:thick;      /*Thick(Heavy)  weight of the font */
font-weight:thin;  /*thin(lighter) weight of the font */
font-weight:length; /*weight of the font is defined in terms of a numeric value */
font-weight:bold; /*weight of the font is bolded */
font-weight:numeric-value; /*This numeric-value ranges from 100(lightest) to 900(heaviest) */

Example of font-weight

<style>
#font_weight_normal {
  Background-color:tomato;
  padding:5px;
  color:white;  
  font-weight:normal;
}
#font_weight_lighter {
  Background-color:aqua;
  padding:5px; 
  font-weight:lighter;
}
#font_weight_900 {
  Background-color:yellow;
  padding:5px;  
  font-weight:900;
}
#font_weight_100 {
  Background-color:powderblue;
  padding:5px;  
  font-weight:100;
}
#font_weight_bold {
  Background-color:tomato;
  padding:5px;
  font-weight:bold;
}
</style>
Run the Code

font family

The CSS font-family is the family of fonts to choose from the list of fonts for the web page.

The Syntax of font-family:
font-family: {list of specific font separated by commas},  {list of generic font separated by commas};

Example of font-family

<style>
#default_family {
  Background-color:tomato;
  padding:5px;
}

#font_family {
  Background-color:tomato;
  padding:5px;  
  font-family:Verdana, Arial, Tahoma, Serif;
}

</style>
Run the Code

It is important to select list of fonts which suits your web page so CSS font families are really important.

NOTE: Never underestimate the font family of your web page

We have compiled a complete CSS font-family list on this page.

font style

Font-style is for styling the font text.

Important values for Font Style are:

  • Normal(by default)
  • Italic – To make the text appear italic(cursive in nature)
  • Oblique  – To make texts appear oblique i.e. sloping or slanted or bent.

Syntax of font-style:
font-style: normal|italic|oblique;

Example of font-style

<style>
#font_style_normal {
  Background-color:yellow;
  padding:5px;
  font-style:normal;
}

#font_style_italic {
  Background-color:lightgreen;
  padding:5px;
  font-style:italic;
}

#font_style_oblique {
  Background-color:orange;
  padding:5px;
  font-style:oblique;
}

</style>
Run the Code

font letter spacing

Font Letter spacing uses ‘letter-spacing’ property to change the spacing between the characters of the texts.

Syntax of font letter spacing:
letter-spacing: normal|units|rem|initial|inherit|unset;

letter spacing

Example of font spacing(letter spacing)

<style>
#normal_letter_spacing {
  letter-spacing: 3px;
}

#inpx {
  letter-spacing: -.5px;
}

#inem {
  letter-spacing: 0.3em;
}

#rem {
  letter-spacing: 0.4rem;
}
</style>
Run the Code

CSS Interview Questions and Answers

We can change font-color using color property in CSS.
Syntax:

color: red;

The ‘color’ property sets the color of the fonts or text.
The syntax for font color to make it green is –
color: green; /* actual color name */

To increase the size of the fonts or text we need to use CSS font-size property.
Syntax:

font-size:18px;

Difference between a font-family and font-style are:-

font-family: With a font-family, we can set more than one font to the selected item while with font-style we can only set one font for a selected item.

font-style: Font-family contains the file from the HTML generic version while the font-style is the CSS version of fonts typically not found in HTML.

Responsive font size fits according to browser screen device.

If we have given a large font like 50px in desktop it looks the same but in mobile devices, it reduces its size.

To make font responsive we need to use vw instead of px, em or %.

vw – viewport width
Example:

font-size: 10vw;

The important properties are –

  • font-color
  • font-size
  • font-weight
  • font-family
  • font-style
  • font-spacing
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!