When designing for print, we have a lot of control over how type is displayed. On the web, CSS gives us the ability to have almost as much fine-grained control over the way fonts are displayed and how they behave.

There are about 18 (largely supported) typography-related CSS properties we can use to achieve almost any amount of nuance. These properties can be divided into three groups -

  • Font properties
  • Text properties
  • Alignment & Spacing properties

Font Properties

These properties control the font that is used and how the font is styled. 

  • font-family — The family of font to be used. This can be the name of a specific font, e.g. Proxima Nova, or a generic family name ,e.g. monospace.

  • font-weight — The boldness of the font. Accepts either a keyword value, e.g, bolder, or one of the accepted numbers, e.g. 100, or 900.

  • font-style — The style of the font within the font family. Can either be normal, italic, or oblique.

  • font-variant — The variation of the font family. Either normal or small-caps.

  • font-size — The size of the font. Accepts either absolute units, such as 12px, or relative units such as 50%. (More about font sizing).

Property Values Example
font-family serif The quick brown fox jumped over the lazy dog
Helvetica The quick brown fox jumped over the lazy dog
font-weight normal The quick brown fox jumped over the lazy dog
700 The quick brown fox jumped over the lazy dog
lighter The quick brown fox jumped over the lazy dog
font-style normal The quick brown fox jumped over the lazy dog
italic The quick brown fox jumped over the lazy dog
oblique The quick brown fox jumped over the lazy dog
font-variant normal The quick brown fox jumped over the lazy dog
small-caps The quick brown fox jumped over the lazy dog
font-size 12px The quick brown fox jumped over the lazy dog
3em The quick brown fox jumped over the lazy dog
50% The quick brown fox jumped over the lazy dog
large The quick brown fox jumped over the lazy dog
3vw The quick brown fox jumped over the lazy dog

Text Properties

These properties control the behaviour of the text.

  • text-align — Describes how inline elements within the text-aligned element are horizontally aligned.

  • text-decoration — Controls the decoration applied to the text. Mainly controls line decoration, e.g. underline, but can also create a text blinking affect with blink (for supporting browsers).

  • text-indent — Controls the indentation of the first line of text within the element.

  • text-transform — Specifies the format of capitalisation that applies to the text.

  • text-shadow — Describes the drop shadow to be applied to the text. Accepts four values - the horizontal position of the shadow (required), the vertical position (required), the blur radius, and the colour.

  • direction — Specifies the writing direction for the text.

  • unicode-bidi — Used to handle cases where an element contains both left-to-right text and right-to-left text.

Property Values Example
text-align left The quick brown fox jumped over the lazy dog
right The quick brown fox jumped over the lazy dog
center The quick brown fox jumped over the lazy dog
justify The quick brown fox jumped over the lazy dog
text-decoration none The quick brown fox jumped over the lazy dog
underline The quick brown fox jumped over the lazy dog
overline The quick brown fox jumped over the lazy dog
line-through The quick brown fox jumped over the lazy dog
blink The quick brown fox jumped over the lazy dog
text-indent 10px The quick brown fox jumped over the lazy dog
10% The quick brown fox jumped over the lazy dog
text-transform none The quick brown fox jumped over the lazy dog
capitalize The quick brown fox jumped over the lazy dog
uppercase The quick brown fox jumped over the lazy dog
lowercase The quick brown fox jumped over the lazy dog
text-shadow 2px 2px red The quick brown fox jumped over the lazy dog
direction ltr The quick brown fox jumped over the lazy dog
rtl The quick brown fox jumped over the lazy dog
unicode-bidi normal LTR: The quick brown fox jumped over the lazy dog RTL: The quick brown fox jumped over the lazy dog
embed LTR: The quick brown fox jumped over the lazy dog RTL: The quick brown fox jumped over the lazy dog
bidi-override LTR: The quick brown fox jumped over the lazy dog RTL: The quick brown fox jumped over the lazy dog

Alignment & Spacing Properties

These properties control how each character or word is positioned within the characters or words around it. 

  • letter-spacing — Specifies the amount of spacing (or "tracking") between each letter.

  • word-spacing — Specifies the amount of spacing between each word.

  • white-space — Describes how white space inside the element is handled.

  • word-wrap / overflow-wrap — Controls how long words that would not normally fit within the line are handled.

  • line-height — Specifies the line-height, i.e. the minimal height of line boxes, within the element.

  • vertical-align — Specifies the vertical positioning of the inline element within its parent. (More about vertical-align)

Property Values Example
letter-spacing normal The quick brown fox jumped over the lazy dog
10px The quick brown fox jumped over the lazy dog
-2px The quick brown fox jumped over the lazy dog
word-spacing normal The quick brown fox jumped over the lazy dog
10px The quick brown fox jumped over the lazy dog
-10px The quick brown fox jumped over the lazy dog
white-space normal The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog
pre The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog
nowrap The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog
pre-wrap The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog
pre-line The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog
word-wrap normal The quick brown fox The quick brown fox superdupersupercalifragilisticexpialidociouslysuperdupersupercalifragilisticexpialidociously jumped over the lazy dog jumped over the lazy dog
break-word The quick brown fox The quick brown fox superdupersupercalifragilisticexpialidociouslysuperdupersupercalifragilisticexpialidociously jumped over the lazy dog jumped over the lazy dog
line-height normal The quick brown fox jumped over the lazy dog
3 The quick brown fox jumped over the lazy dog
20px The quick brown fox jumped over the lazy dog
300% The quick brown fox jumped over the lazy dog
vertical-align baseline The quick brown fox jumped over the lazy dog
sub Baseline The quick brown fox jumped over the lazy dog
super Baseline The quick brown fox jumped over the lazy dog
top Baseline The quick brown fox jumped over the lazy dog
bottom Baseline The quick brown fox jumped over the lazy dog
text-top Baseline The quick brown fox jumped over the lazy dog
text-bottom Baseline The quick brown fox jumped over the lazy dog
middle Baseline The quick brown fox jumped over the lazy dog
50% Baseline The quick brown fox jumped over the lazy dog
10px Baseline The quick brown fox jumped over the lazy dog