CSS Fonts

CSS font attributes define font, bold, size, and font-style

CSS font

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

  • Common font family -Combination of font systems with similar appearance (such as "Serif" or "Monospace")
  • A specific font family -a specific font family (such as "Times" or "Courier")
Generic family font family Description
Serif Times New Roman
The characters in the Serif font have extra decoration at the end of the line
Sans-serif Arial
"Sans" means none-these fonts have no extra decoration at the end
Monospace Courier New
Lucida Console
All monospace characters have the same width

Font family

The font-family property sets the font family of the text.

The font-family property should set several font names as a "fallback" mechanism. If the browser does not support the first font, he will try the next font.

Note : If the name of the font family is more than one word, it must be quoted, such as Font Family: "Songti".

Multiple font families are separated by a comma:


p{font-family:"Times New Roman", Times, serif;}
Try it yourself »

Font Style

It is mainly used to specify the font style attribute of italic text.

This attribute has three values:

  • Normal-display text normally
  • Italic-Text in italics
  • Slanted text-text is slanted to the side (very similar to italic, but not very supported)


h2.normal {
    font-style: normal;

p.italic {
    font-style: italic;

h2.oblique {
    font-style: oblique;
Try it yourself »

font-size attribute sets the size of the text.

The ability to manage text size is very important in web design. However, you cannot make the paragraph look like a title or make the title look like a paragraph by adjusting the font size.

Be sure to use the correct HTML tags, just <h1> - <h6>Represents the title and <p>Represents a paragraph:

The font size value can be absolute or relative.

Absolute size:

  • Set a text of a specified size
  • Do not allow users to change text size in all browsers
  • The absolute size is useful when determining the physical size of the output

Relative size:

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

Remark If you don't specify a font size, the default size is 16 pixels (16px = 1em) like a normal text paragraph.


h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
Try it yourself »

Use em to set font size

To avoid the problem of inability to adjust text in Internet Explorer, many developers use em units instead of pixels.

em's dimensions are suggested by the W3C.

1em is equal to the current font size. The default text size in the browser is 16px.

So the default size of 1em is 16px. Pixels can be converted to em using this formula: px /16 = em


h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Try it yourself »

In the above example, the text size of em is the same as the pixel in the previous example. However, if you use em units, you can resize the text in all browsers.

Unfortunately, it is still a problem with Internet Explorer. When resizing the text, it will be larger or smaller than the normal size.

Use a Combination of Percent and Em

In all browser solutions, the default <body> font size of the element is set as a percentage:


body {
    text dimension: 100%;

h1 {
    text dimension: 2.5em;

h2 {
    text dimension: 1.875em;

p {
    text dimension: 0.875em;
Try it yourself »

CSS font-weight property

The font-weight property determines the heaviness of a font:


p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Try it yourself »

Font Variant

The font-variant property sets the font of small capital letters to display text, which means that all lowercase letters are converted to uppercase, but all letters using small capital letters have a smaller font size than the rest of the text


Try it yourself »