Web design is 95% typography

Look over some of CSS’s text-specific properties, ways we can style text & how to make things readable.

Go fullscreen: ⌃⌥F

Web design is 95% typography

Text is everywhere

  • So much of our interfaces are text label
  • Text is extremely accessible
  • Content is exceptionally important

Typography

Readability on the web is critical

  • Looser line-height than print
  • Similar line-length to print
  • Lots of breaks: headings, lists, highlights
  • Colour contrast between text & background

CSS controls typography

CSS gives us lots and lots of control over typography—and it’s always getting better.

CSS 
h1 {
  background-color: #f2f1ed;      /* Colour behind text */
  color: #222;                    /* Text colour */
  font-family: Georgia, serif;    /* Suggested typeface & backup */
  font-size: 2rem;                /* Suggested size of the type */
  font-style: italic;             /* Italic or normal */
  font-weight: bold;              /* Bold, normal, or number like 200 */
  line-height: 1.5;               /* Multiplier against the size */
  list-style-type: square;        /* Bullets: none, circle, decimal, lower-alpha, etc. */
  text-align: center;             /* Left, right, center, justify */
  text-decoration: underline;     /* Underline or none */
  text-transform: uppercase;      /* Uppercase, lowercase */
}
img {
  width: 100%;                    /* Make the width fill the whole space */
}

Core typefaces

  • Arial
  • Verdana
  • Georgia
  • Times New Roman
  • Comic Sans (um… really!?)
  • Courier
  • Impact (not as reliable)

Google Fonts

Can’t just use any typeface available on your computer

Google has many good typefaces (Typekit too)

Include another CSS <link> tag

Font sizes

Suggestions for the size to be displayed—user is always in control

  • rem — scalable size based on browser settings
  • em — scalable size based on parent element
  • px — don’t use for font-size—ever

Videos & tutorials

Start

Web design is 95% typography

Look over some of CSS’s text-specific properties, ways we can style text & how to make things readable.