Controlling Typography in CSS

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|

<tbody>

  <tr>
    <td class="property" rowspan="2">
      <code>font-family</code>
    </td>

    <td class="values" rowspan="1">
      <code>serif</code>
    </td>
    <td class="example">

      <span style="display: block; font-family: serif">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>Helvetica</code>
    </td>
    <td class="example">
      <span style="display: block; font-family: Helvetica">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="property" rowspan="3">
      <code>font-weight</code>
    </td>

    <td class="values" rowspan="1">
      <code>normal</code>
    </td>
    <td class="example">

      <span style="display: block; font-weight: normal">The quick brown fox jumped over the lazy dog</span>
    </td>
  </tr
  <tr>
    <td class="values" rowspan="1">
      <code>700</code>
    </td>
    <td class="example">
      <span style="display: block; font-weight: 700">The quick brown fox jumped over the lazy dog</span>
    </td>
  </tr>
  <tr>
    <td class="values" rowspan="1">
      <code>lighter</code>
    </td>
    <td class="example">
      <span style="display: block; font-weight: lighter">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>
  <tr>
    <td class="property" rowspan="3">
      <code>font-style</code>
    </td>

    <td class="values" rowspan="1">
      <code>normal</code>
    </td>
    <td class="example">

      <span style="display: block; font-style: normal">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>
  <tr>
    <td class="values" rowspan="1">
      <code>italic</code>
    </td>
    <td class="example">
      <span style="display: block; font-style: italic">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>oblique</code>
    </td>
    <td class="example">
      <span style="display: block; font-style: oblique">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>
  <tr>
    <td class="property" rowspan="2">
      <code>font-variant</code>
    </td>

    <td class="values" rowspan="1">
      <code>normal</code>
    </td>
    <td class="example">

      <span style="display: block; font-variant: normal">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>small-caps</code>
    </td>
    <td class="example">
      <span style="display: block; font-variant: small-caps">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>
  <tr>
    <td class="property" rowspan="5">
      <code>font-size</code>
    </td>

    <td class="values" rowspan="1">
      <code>12px</code>
    </td>
    <td class="example">

      <span style="display: block; font-size: 12px">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>3em</code>
    </td>
    <td class="example">
      <span style="display: block; font-size: 3em">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>50%</code>
    </td>
    <td class="example">
      <span style="display: block; font-size: 50%">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>large</code>
    </td>
    <td class="example">
      <span style="display: block; font-size: large">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>3vw</code>
    </td>
    <td class="example">
      <span style="display: block; font-size: 3vw">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>
  </tbody>

|---|---|---|

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|

<tbody>


  <tr>
    <td class="property" rowspan="4">
      <code>text-align</code>
    </td>

    <td class="values" rowspan="1">
      <code>left</code>
    </td>
    <td class="example">

      <span style="display: block; text-align: left">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>right</code>
    </td>
    <td class="example">
      <span style="display: block; text-align: right">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>center</code>
    </td>
    <td class="example">
      <span style="display: block; text-align: center">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>justify</code>
    </td>
    <td class="example">
      <span style="display: block; text-align: justify">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>






  <tr>
    <td class="property" rowspan="5">
      <code>text-decoration</code>
    </td>

    <td class="values" rowspan="1">
      <code>none</code>
    </td>
    <td class="example">

      <span style="display: block; text-decoration: none">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>underline</code>
    </td>
    <td class="example">
      <span style="display: block; text-decoration: underline">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>overline</code>
    </td>
    <td class="example">
      <span style="display: block; text-decoration: overline">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>line-through</code>
    </td>
    <td class="example">
      <span style="display: block; text-decoration: line-through">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>blink</code>
    </td>
    <td class="example">
      <span style="display: block; text-decoration: blink">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>






  <tr>
    <td class="property" rowspan="2">
      <code>text-indent</code>
    </td>

    <td class="values" rowspan="1">
      <code>10px</code>
    </td>
    <td class="example">

      <span style="display: block; text-indent: 10px">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>10%</code>
    </td>
    <td class="example">
      <span style="display: block; text-indent: 10%">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>






  <tr>
    <td class="property" rowspan="4">
      <code>text-transform</code>
    </td>

    <td class="values" rowspan="1">
      <code>none</code>
    </td>
    <td class="example">

      <span style="display: block; text-transform: none">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>capitalize</code>
    </td>
    <td class="example">
      <span style="display: block; text-transform: capitalize">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>uppercase</code>
    </td>
    <td class="example">
      <span style="display: block; text-transform: uppercase">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>lowercase</code>
    </td>
    <td class="example">
      <span style="display: block; text-transform: lowercase">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>






  <tr>
    <td class="property" rowspan="1">
      <code>text-shadow</code>
    </td>

    <td class="values" rowspan="1">
      <code>2px 2px red</code>
    </td>
    <td class="example">

      <span style="display: block; text-shadow: 2px 2px red">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>







  <tr>
    <td class="property" rowspan="2">
      <code>direction</code>
    </td>

    <td class="values" rowspan="1">
      <code>ltr</code>
    </td>
    <td class="example">

      <span style="display: block; direction: ltr">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>rtl</code>
    </td>
    <td class="example">
      <span style="display: block; direction: rtl">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="property" rowspan="3">
      <code>unicode-bidi</code>
    </td>

    <td class="values" rowspan="1">
      <code>normal</code>
    </td>
    <td class="example">

      <span style="display: block; unicode-bidi: normal; direction: ltr">LTR: The quick brown fox jumped over the lazy dog</span>

RTL: The quick brown fox jumped over the lazy dog

  </tr>

|---|---|---|

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|

<tbody>



  <tr>
    <td class="property" rowspan="3">
      <code>letter-spacing</code>
    </td>

    <td class="values" rowspan="1">
      <code>normal</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">

      <span style="display: block; letter-spacing: normal">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>10px</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; letter-spacing: 10px">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>-2px</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; letter-spacing: -2px">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>






  <tr>
    <td class="property" rowspan="3">
      <code>word-spacing</code>
    </td>

    <td class="values" rowspan="1">
      <code>normal</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">

      <span style="display: block; word-spacing: normal">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>10px</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; word-spacing: 10px">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>-10px</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; word-spacing: -10px">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>






  <tr>
    <td class="property" rowspan="5">
      <code>white-space</code>
    </td>

    <td class="values" rowspan="1">
      <code>normal</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">

      <span style="display: block; white-space: normal">The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>pre</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; white-space: pre">The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>nowrap</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; white-space: nowrap">The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>pre-wrap</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; white-space: pre-wrap">The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>pre-line</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; white-space: pre-line">The quick brown fox supercalifragilisticexpialidociously jumped over the lazy dog</span>
    </td>

  </tr>






  <tr>
    <td class="property" rowspan="2">
      <code>word-wrap</code>
    </td>

    <td class="values" rowspan="1">
      <code>normal</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">

      <span style="display: block; word-wrap: normal">The quick brown fox The quick brown fox superdupersupercalifragilisticexpialidociouslysuperdupersupercalifragilisticexpialidociously jumped over the lazy dog jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>break-word</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; word-wrap: break-word;">The quick brown fox The quick brown fox superdupersupercalifragilisticexpialidociouslysuperdupersupercalifragilisticexpialidociously jumped over the lazy dog jumped over the lazy dog</span>
    </td>

  </tr>






  <tr>
    <td class="property" rowspan="4">
      <code>line-height</code>
    </td>

    <td class="values" rowspan="1">
      <code>normal</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">

      <span style="display: block; line-height: normal">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>3</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; line-height: 3">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>20px</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; line-height: 20px">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>300%</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span style="display: block; line-height: 300%">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>






  <tr>
    <td class="property" rowspan="10">
      <code>vertical-align</code>
    </td>

    <td class="values" rowspan="1">
      <code>baseline</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">

      <span style="display: block; vertical-align: baseline">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


  <tr>
    <td class="values" rowspan="1">
      <code>sub</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span>Baseline </span><span style="vertical-align: sub">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>super</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span>Baseline </span><span style="vertical-align: super">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>top</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span>Baseline </span><span style="vertical-align: top">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>bottom</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span>Baseline </span><span style="vertical-align: bottom">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>text-top</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span>Baseline </span><span style="vertical-align: text-top">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>text-bottom</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span>Baseline </span><span style="vertical-align: text-bottom">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>middle</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span>Baseline </span><span style="vertical-align: middle">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>50%</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span>Baseline </span><span style="vertical-align: 50%">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>

  <tr>
    <td class="values" rowspan="1">
      <code>10px</code>
    </td>
    <td class="example" style="width: 50%; max-width: 400px">
      <span>Baseline </span><span style="vertical-align: 10px">The quick brown fox jumped over the lazy dog</span>
    </td>

  </tr>


</tbody>

|---|---|---|