Web design is 95% typography · Web Design 1

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