Font families

CSS has five main font families of which various fonts descend:

• Serif: Font's which have small lines or strokes attached to the end of a longer stroke. This is different from a diacritic mark which isn't part of the letter itself.
• Sans-serif: Font's which omit the small lines or strokes attached to the end of longer stokes, often more accessible for users with certain disabilities or neurodivergences. The British Dyslexia Association has a guide for creating dyslexia friendly text.
• Monospace: Font's where each character has a fixed width, may have serifs or be sans-serif.
• Cursive: Font's which replicate cursive handwriting, usually consist of joining strokes or other characteristics for joining letters.
• Fantasy: Font's which are not generally used for large portions of reading but for effect.

The family of fonts used by default is decided by the browser stylesheet. You can override these defaults for any element using the font-family property:

When a comma-separated list of values is supplied to the font-family property, each successive font acts as a backup in-case the prior specified is not available on the machine in use.

Font-settings

Alongside controlling the family of font in use, additional typographic properties are available for finer control of a font:

• font-size: Specifying the size of a font using measurement units or the values: xx-small, x-small, smaller, small, medium, large, larger, x-large, xx-large, xxx-large
• font-style: Specifies whether a font is normal, italic or oblique styled from its font-family
• font-weight: Specifies the weight of a font as a value between 1 and 1000 (CSS level 4) or a value: normal (400), bold (700), lighter (one relative font lighter), bolder (one relative font bolder)
• line-height: Specifies the height of a line box, commonly used to set the distance between lines of text
• font-variant: Use to specify variant styling for a font, see here for more information.
• font-stretch: Use to specify how a font should be stretched, affects overall size and appearance of text. See here

Fortunately, there exists a font property which can be used as a shorthand for all of the prior mentioned properties. The only mandatory values are the font-size and font-family respectively:

font: font-size font-family

The following example demonstrates setting the font to be italic in style, 14px in size, 700 in weight and 2 in line-height with a sans-serif font-family:

External fonts

CSS also provides the capabilities to import fonts from other sources, see Google Fonts to find a variety of open-source fonts free for usage in commercial and non-commercial projects.

There are two ways to import an external font, either via a HTML link tag in the head or an @import rule in your CSS. HTML would look as follows for the Roboto font:

HTML<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,700&display=swap" rel="stylesheet">

For CSS, as follows:

CSS@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,700&display=swap');

To use the imported style, specify it in single-quotes when specifying a font-family:

General text styling properties

• vertical-align: Sets the vertical alignment of an inline, inline-block or table-cell box according to its line-box.
• color: Sets the text color for an element and its inheriting children.
• text-align: Sets the horizontal alignment of inline-level text content inside a block element or table-cell, similar to vertical-align but on the horizontal axis.
• text-decoration: Sets or removes decorations from text. Commonly applied to anchor elements to remove the default underline style.
• text-transform: Specifies a transformation to apply to text such as lowercase, uppercase or capitalize
• text-indent: Specifies the indentation of the first line of text in an element.
• direction: Specifies the direction of the text as rtl (right to left) or ltr (left to right)
• text-shadow: Applies a shadow to some text.
• letter-spacing: Sets the spacing between text characters.
• word-spacing: Sets the spacing between words in text.

The following example demonstrates using a variety of these properties to style different textual elements:

Other ways of improving the appearance of text

The font and text properties give a lot of power over the appearance of text, other properties can also be used to adjust the layout.