CSS Fonts

Fonts are one of the most heavily-used properties for styling. They can improve readability and further express a page’s tone and feeling.

In CSS, there are five generic font families:

  • Serif
  • Sans-serif
  • Monospace
  • Cursive
  • Fantasy

These fonts are considered to be “web-safe” because they are supported in most major web browsers. Below is a table that showcases each family, along with a few examples:

Font FamilyCharacteristicsExamples
SerifSmall decorative strokes added to the ends of letters, often used for printed materials because they are more legible.- Georgia
- Times New Roman
- Baskerville
Sans-serifNo strokes at the ends of letters, often used in digital media and advertising for a modern and professional look.- Arial
- Helvetica Neue
- Open Sans
MonospaceEach character takes up the same amount of horizontal space, often used for computer programming.- Consolas
- Courier New
- Lucida Console
CursiveHas a hand-written appearance, often used for printed materials that convey a personal touch.- Brush Script MT
- Lobster
- Dancing Script
FantasyHighly stylized or decorative letter forms, often used to add personality and flair to a design or display.- Impact
- Chiller
- Jokerman

To assign these families with CSS, we use the font-family property:

p {
  font-family: Arial, sans-serif;
}

NOTE

Note: Why did that example include an additional font, sans-serif, at the end? It is good practice to always include a general font name after the desired font name. This way, the browser can fall back to something if need be.


Font Properties

Besides font-family, there are other CSS properties we can use to style our fonts.

The font-size property sets how big the text of a given element should be on the page. It can either be done with absolute units (pxpt, etc.) or relative units (percentages, emrem, etc.)

This property can be applied to any element that features text content, such as paragraphs:

/* With Absolute Units */
p {
  font-size: 12px;
}
 
/* With Relative Units */
p {
  font-size: 12em;
}

The following image showcases a few more examples of using the font-size property:

Example of absolute and relative units.

Note: The font-size property should be applied in an accessible way. This means avoiding absolute units when possible and not making paragraph text as large as header text (or vice versa).

We can also use the font-weight property to set the default “thickness” of a given element’s text.

This property uses either keyword values (e.g., lighter and bolder), or numeric values (e.g., 100 and 800):

p {
  font-weight: 800;
}

If we use numeric values for the font-weight property, keep the following in mind:

  • Anything less than 400 makes the font thinner or lighter.
  • The 400-700 range is considered “normal” for most fonts.
  • Anything above 700 usually makes the font bolder.

Note: 

Despite these ranges, not all font families are affected the same way by the font-weight property. For example, if a given font is already bold to begin with, an increased font-weight might have little to no effect.