Web typography cheat sheet

Metrics

  • 1rem, 100%, 16px

    • Body copy size — should never be smaller.

    • 110% for large screens.

    • 120% for extra large screens.

  • 1.31.5

    • Body line-height — looser on the web.

    • 1.3 for small screens.

    • 1.4 for medium screens.

    • 1.5 for large screens.

  • 30em40em

    • Body maximum line-length.

    • Shorter on small screens is okay.

Units

  • rem

    • Based on the font-size set in the html element.

    • 1.5rem is 1.5 × the html element’s font size.

  • em

    • Based on the font-size of the parent (or current element).

    • 1em is 1 × the parent element’s size.

    • 0.5em is 0.5 × the parent element’s size.

  • %

    • Percentage

    • A percentage of the font-size of the parent element.

    • 80% is to 80% the size of the parent element.

  • vh

    • Viewport height

    • Allows you to change the type size based on the height of the window.

  • vw

    • Viewport width

    • Allows you to change the type size based on the width of the window.

  • px

    • CSS pixels—different sizes for every device.

    • 16px is exactly 16 pixels in all situations.

    • Avoid using pixels for font sizes unless absolutely necessary.

Properties

  • color

  • font-family

    • Change the typeface of the text.

    • Put quotes around typefaces with spaces in their names.

    • Always provide a fallback typeface.

    • Web safe fonts: Georgia, Arial, Verdana, Times, Comic Sans, Courier.

    • font-family: "Open Sans", sans-serif;
      
  • font-size

    • Change the size of the text.

    • Prefer rem or em units.

    • font-size: 1.5rem;
      
  • font-weight

    • Change the thickness of the text.

    • bold, normal, number: 400, 700, etc.

    • font-weight: bold;
      
  • font-style

    • Change the slanting of the text.

    • italic, normal

    • font-style: italic;
      
  • line-height

    • Adjust the space a line takes up, similar to leading.

    • Set in a number, a multiplier of the font size.

    • line-height: 1.4;
      
  • text-align

    • Adjust the position of the text within its parent.

    • left, right, center, justify

    • text-align: center;
      
  • text-decoration

    • Add or remove lines on the text.

    • none, underline, line-through, overline

    • text-decoration: none;
      
  • text-transform

    • Change the capitalization of the text.

    • uppercase, lowercase, capitalize

    • text-transform: uppercase;
      
  • text-indent

    • Indent the first line of text.

    • Set the number in ems.

    • text-indent: .8em;
      
  • text-shadow

    • Add a drop shadow to the text.

    • Needs four properties: horizontal offset, vertical offset, blur radius, colour.

    • Use a comma after the colour to add more than one shadow.

    • text-shadow: 2px 2px 5px rgba(0,0,0,.5);
      
  • text-overflow

    • Determine what happens to the text if it’s too wide for its box.

    • Often requires overflow: hidden; to be used.

    • ellipsis, clip, custom: "."

    • text-overflow: ellipsis;
      
  • list-style-type

    • Control the style of bullets on a list.

    • none, circle, disc, square, decimal, lower-alpha, lower-roman, lower-greek

    • list-style-type: square;
      
  • font

    • Shorthand property for specifying lots of font details.

    • Syntax: font: [font-style] [font-variant] font-weight font-size/line-height font-family;

    • font: normal 100%/1.5 sans-serif;
      
  • letter-spacing

    • Controls the space between the different letters.

    • letter-spacing: .3em;
      
  • word-spacing

    • Controls the space between the different words.

    • word-spacing: 1em;
      
  • white-space

    • Controls how the text wraps.

    • normal, nowrap, pre

    • white-space: nowrap;
      
  • word-wrap

    • Controls whether the browser is allowed to break really long words.

    • normal, break-word

    • word-wrap: break-word;
      
  • ::first-line

    • Select the first line of text.

    • Good for highlighting the first line of a paragraph.

    • p::first-line {}
      
  • ::first-letter

    • Select the first character in the text.

    • Good for drop caps.

    • p::first-letter {}
      
  • ::selection

    • Not a property, but a selector.

    • Style an element when it has been selected and highlighted.

    • ::selection {
        color: red;
      }
      

Text-flow columns

For making text flow between a few columns.

  • column-count

    • Set to the number of columns wanted in the text block.

    • column-count: 2;
      
  • column-gap

    • Set the amount of space between the columns.

    • column-gap: 1.5rem;
      
  • column-rule

    • Create a vertical border between each column.

    • Exact same 3 values as a border.

    • column-rule: 2px solid #e2e2e2;
      
  • Example layout

    • An example of CSS columns

  • Example HTML

    • <main class="main">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </main>
      
  • Column CSS properties

    • .main {
        column-count: 2;
        column-gap: 1.5rem;
        column-rule: 2px solid #e2e2e2;
      }
      

Experimental properties

These properties may not work in all browsers and may have a major performance impact.

  • hyphens

    • Control if the text will be hyphenated.

    • Usually requires text-align: justify.

    • none, auto

    • Example: hyphens: auto;

  • font-kerning

    • Control a font’s built-in kerning metrics.

    • none, normal, auto

    • Example: font-kerning: auto;

  • font-variant-ligatures

    • Control whether ligatures are used or not.

    • none, normal, specific: common-ligatures, contextual, etc.

    • Example: font-variant-ligatures: normal;

  • font-variant-numeric

    • Enable/disabled alternative glyphs for numbers & fractions.

    • normal, ordinal, slashed-zero, oldstyle-nums, tabular-nums, etc.

    • Example: font-variant-numeric: oldstyle-nums;

  • font-variant-caps

    • Control whether small caps are used or not.

    • normal, small-caps

    • Example: font-variant-caps: small-caps;

  • text-rendering

    • Controls a bunch of the font-variant properties automatically.

    • Has extreme performance issues.

    • Example: text-rendering: optimizeLegibility;

Keyboard shortcuts

Some of these keyboard shortcuts may require the ABC Extended keyboard (or U.S. Extended).

  • “ ”

    • Double curly quote.

    • — Mac:⌥[

    • — Mac:⌥⇧]

  • ‘ ’

    • Single curly quote, apostrophe.

    • — Mac:⌥]

    • — Mac:⌥⇧]

  • « »

    • Double guillemet.

    • «— Mac:⌥\

    • »— Mac:⌥⇧\

  • ‹ ›

    • Single guillemet.

    • — Mac:⌥⇧3

    • — Mac:⌥⇧4

    • En-dash.

    • Mac:⌥-

    • Em-dash.

    • Mac:⌥⇧-

    • Bullet.

    • Mac:⌥8

  • ·

    • Middle dot.

    • Mac:⌥⇧9

  • °

    • Degree.

    • Mac:⌥⇧8

    • Ellipsis.

    • Mac:⌥;

    • Numero.

    • Mac:⌥⇧;

    • Pilcrow.

    • Mac:⌥7;

    • Double dagger.

    • Mac:⌥⇧7;

  • ¢

    • Cents.

    • Mac:⌥4

  • §

    • Section.

    • Mac:⌥5

  • ©

    • Copyright.

    • Mac:⌥G