CSS Font

The CSS font properties define the font family, size, boldness, style (such as italic), and transformation (such as small caps) of the text.

CSS Font Series

In CSS, there are two different types of font family names:

  • Generic font family - combination of font systems with similar appearance (such as "Serif" or "Monospace")
  • Specific font family - specific font family (such as "Times" or "Courier")

In addition to various specific font families, CSS defines 5 generic font families:

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

If you need to learn more about font families, please read CSS Font Series.

Specified font family

Use font-family attribute Define the font family of the text.

Using generic font families

If you want the document to use a sans-serif font but do not care which font it is, the following is a suitable declaration:

body {font-family: sans-serif;}

Try it yourself

The user agent will then select a font from the sans-serif font family (such as Helvetica) and apply it to the body element. Because of inheritance, this font selection will also apply to all elements contained within the body element unless a more specific selector overrides it.

Specified font family

In addition to using generic font families, you can also set more specific fonts through the font-family attribute.

The following example sets the Georgia font for all h1 elements:

h1 {font-family: Georgia;}

Try it yourself

This rule may also produce another problem: if the user agent does not have the Georgia font installed, it can only use the default font of the user agent to display the h1 element.

We can solve this problem by combining a specific font name with a generic font family:

h1 {font-family: Georgia, serif;}

Try it yourself

If the reader has not installed Georgia but has installed Times font (a font in the serif font family), the user agent may use Times for the h1 element. Although Times does not match Georgia completely, it is at least close enough.

Therefore, we recommend providing a generic font family in all font-family rules. This provides a fallback option so that a candidate font can be selected if the user agent cannot provide a specific font that matches the rule.

If you are very familiar with fonts, you can also specify a series of similar fonts for the given elements. To do this, you need to arrange these fonts in order of priority and then connect them with commas:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

Try it yourself

According to this list, the user agent will search for these fonts in the order listed. If all the listed fonts are unavailable, a simple serif font will be chosen.

Using quotes

You may have noticed that single quotes are used in the above examples. Quotes are only needed in the font-family declaration if the font name contains one or more spaces (such as New York), or if the font name includes symbols like # or $.

Single quotes or double quotes are both acceptable. However, if a font-family attribute is placed in the HTML style attribute, then the type of quote not used by the attribute itself must be used:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,</p>
 'New York', serif;">...

Try it yourself

Font style

font-style attributeIt is most commonly used to specify oblique text.

This attribute has three values:

  • normal - Display text normally
  • italic - Display text in italic
  • oblique - Display text obliquely

Example

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Try it yourself

Difference between italic and oblique

font-style is very simple: it is used to choose between normal text, italic text, and oblique text. The only slightly complex part is to clearly distinguish between italic text and oblique text.

Italic (italic) is a simple font style that makes some minor changes to the structure of each letter to reflect the changed appearance. In contrast, oblique text is a slanted version of normally vertical text.

In most cases, italic and oblique text look exactly the same in web browsers.

Font variant

font-variant attributeSmall caps can be set.

Small caps are not ordinary uppercase letters nor lowercase letters; these letters use uppercase letters of different sizes.

Example

p {font-variant:small-caps;}

Try it yourself

Font boldness

font-weight attributeSet the text thickness.

Use the bold keyword to set the text to bold.

The keywords 100 ~ 900 specify 9 levels of boldness for fonts. If a font has built-in boldness levels, these numbers directly map to the predefined levels, with 100 corresponding to the finest font transformation and 900 corresponding to the thickest font transformation. The number 400 is equivalent to normal, and 700 is equivalent to bold.

If the boldness of an element is set to bolder, the browser will set a bolder font weight than the inherited value. Conversely, the keyword lighter will cause the browser to reduce the boldness rather than increase it.

Example

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Try it yourself

Font size

font-size attributeSet the text size.

The ability to manage text size is important in the field of web design. However, you should not adjust the text size to make paragraphs look like headings, or make headings look like paragraphs.

Always use the correct HTML headings, such as using <h1> - <h6> to mark headings, and using <p> to mark paragraphs.

The font-size value can be an absolute or relative value.

Absolute value:

  • Set the text to a specified size
  • Do not allow users to change text size in all browsers (not conducive to accessibility)
  • Absolute size is very useful when determining the physical output size

Relative size:

  • Set size relative to surrounding elements
  • Allow users to change text size in the browser

Note:If you do not specify a font size, the default size for normal text (such as paragraphs) is 16 pixels (16px = 1em).

Use pixels to set font size

By setting text size in pixels, you can have complete control over the text size:

Example

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

Try it yourself

In Firefox, Chrome, and Safari, you can resize the text size of the above examples, but not in Internet Explorer.

Although you can adjust the text size using the browser's zoom tool, this actually adjusts the entire page, not just the text.

Use em to set font size

To avoid issues with non-adjustable text in Internet Explorer, many developers use em units instead of pixels.

W3C recommends using em size units.

1em equals the current font size. If an element's font-size is 16 pixels, then for that element, 1em equals 16 pixels. When setting font size, the em value changes relative to the font size of the parent element.

The default text size in browsers is 16 pixels. Therefore, the default size of 1em is 16 pixels.

You can use the following formula to convert pixels to em:pixels/16=em

(Note: 16 equals the default font size of the parent element, assuming the parent element's font-size is 20px, then the formula needs to be changed to:pixels/20=em

Example

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Try it yourself

In the above example, the text size in em units is the same as the text in pixels in the previous example. However, if em units are used, text size can be adjusted in all browsers.

Unfortunately, there is still an issue in IE. When resetting text size, it may be larger or smaller than the normal size.

Combining Percentages and EM

A solution that works in all browsers is to set the default font-size value for the body element (parent element) in percentages:

Example

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Try it yourself

Our code is very effective. It can display the same text size in all browsers and allows all browsers to scale the text size.

CSS Font Example:

Set the text font
This example demonstrates how to set the text font.
Set the font size
This example demonstrates how to set the font size.
Set the font style
This example demonstrates how to set the font style.
Set the font variant
This example demonstrates how to set the font variant.
Set the font weight
This example demonstrates how to set the font weight.
All font properties within a single declaration
This example demonstrates how to use abbreviated properties to set font properties within a single declaration.

CSS Font Properties

Property Description
font Abbreviated properties. Their function is to set all font-related properties within a single declaration.
font-family Set the font family.
font-size Set the font size.
font-size-adjust Intelligently scale the replacement font when the preferred font is unavailable. (This attribute has been removed in CSS2.1.)
font-stretch Horizontally stretch the font. (This attribute has been removed in CSS2.1.)
font-style Set the font style.
font-variant Display text in small caps or normal font.
font-weight Set the thickness of the font.