CSS Tutorial

CSS Fonts

CSS Fonts consist of the way you handle the boldness, font family, size, and style of the text using font properties.

F
Bigger Text
F
Italic Text
F
Bolder Text
  Do It Yourself

In CSS, font properties are used to specify the styles and format of a text. These properties vary as we have the font-family, font-style, font-size, font-weight and so on.

Font Families

Font family in CSS specifies lists of one or more font family names or font faces of the text or font in an element. We have two classifications of font-family:

  • Classification by look (generic family).
    Classification by family name (font family).
  • Generic family

Generic family is a group of fonts with a similar look. Examples are:

  • Serif
  • Monospace

Font Family

The font-family is a CSS property used to set the font family of a text.

It is used to define a group of font faces that a text can apply.

If the name of a font family is more than one word, it must be in quotation marks, like: "Lucida Sans Unicode". More than one font family should be specified in a comma-separated list.

Examples

p {
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}

  Do It Yourself

Font Size

The font-size property sets the size of a text. The font size of a text can either be specified as:

  • Static size - This size cannot be resized by the user or browser (usually measured with pixels).
  • Ratio size - This is determined by the size of the browser or parent element (usually measured with percent or em).

Static Size

The following example sets the font size of a webpage body to a static size using the pixel unit. By setting a text size using the pixel unit, it is not allowed by the browser to change the size using pixel, it brings the actual pixel of the text.

Examples

body {
font-size: 16px; /* Sets the font size of a webpage to 16px. */
}

  Do It Yourself

a

Ratio Size

The % or em unit is used to set the size of a text in ratio to the browser or the parent element.
A parent element is an HTML element embedding another HTML element, text or any other object.

Below is an example of font size by the ratio:

Examples

body {
font-size: 100%;
} 
p {
font-size: 1em; /* 1em = 16px. */
}

Although it is a standard that 1em = 16px, but em units vary in screen sizes as they appear larger on a larger screen compared to a smaller screen.

  Do It Yourself

Font Style

The font-style property is used to specify the style of a text.

This property value can either be normal, italic and oblique.

Example

span {
font-style: normal;
} 

a {
font-style: italic;
} 

h1 {
font-style: oblique;
}

  Do It Yourself

Font Weight

The font-weight property is used to specify the thickness of a font or text.

This thickness depends on the font-family that is currently set.

This property value can either be bold, bolder, lighter, number, initial, inherit.

Example

/* Keyword values */
span {
  font-weight: normal;
}

button {
  font-weight: bold;
}

div {
  font-style: normal;
}


/* Keyword values that is relative to the parent element */
span {
  font-weight: lighter; /* Make the font lighter than the parent's */
}

button {
  font-weight: bolder; /* Make the font lighter than the parent's */
}

/* Numeric keyword values */
h1 {
  font-weight: 400; /* normal */
}

div {
  font-weight: 700; /* bold */
}

/* *Note: You can use the font-weight number value from 100-900. Value: 400 means normal and Value: 900 means bold. */

/* Global values */
span {
  font-weight: inherit;
}

button {
  font-weight: initial;
}

div {
  font-weight: unset;
}

  Do It Yourself

What You Should Know at the End of This Lesson

  • You should be able to tell briefly what CSS fonts are all about.
  • You should be able to specify a font size to static (cannot be changed) or rational (possible to change by the browser).
  • You should be able to style a text using different values of the font-style property.
Previous Chapter Next Chapter

Related Chapters

Related Examples