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)…


This content originally appeared on bitsofcode and was authored by Ire Aderinokun

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>

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


This content originally appeared on bitsofcode and was authored by Ire Aderinokun


Print Share Comment Cite Upload Translate Updates
APA

Ire Aderinokun | Sciencx (2015-12-15T00:00:00+00:00) Controlling Typography in CSS. Retrieved from https://www.scien.cx/2015/12/15/controlling-typography-in-css/

MLA
" » Controlling Typography in CSS." Ire Aderinokun | Sciencx - Tuesday December 15, 2015, https://www.scien.cx/2015/12/15/controlling-typography-in-css/
HARVARD
Ire Aderinokun | Sciencx Tuesday December 15, 2015 » Controlling Typography in CSS., viewed ,<https://www.scien.cx/2015/12/15/controlling-typography-in-css/>
VANCOUVER
Ire Aderinokun | Sciencx - » Controlling Typography in CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2015/12/15/controlling-typography-in-css/
CHICAGO
" » Controlling Typography in CSS." Ire Aderinokun | Sciencx - Accessed . https://www.scien.cx/2015/12/15/controlling-typography-in-css/
IEEE
" » Controlling Typography in CSS." Ire Aderinokun | Sciencx [Online]. Available: https://www.scien.cx/2015/12/15/controlling-typography-in-css/. [Accessed: ]
rf:citation
» Controlling Typography in CSS | Ire Aderinokun | Sciencx | https://www.scien.cx/2015/12/15/controlling-typography-in-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts