Little Known
CSS Basics Typography

Typography 95%* of Web Design

CSS Font Properties

font

A shorthand property:

  • font-style
  • font-weight
  • font-variant
  • font-size
  • line-height
  • font-family

font-size

Values: any number with a unit

  • 15px
  • 200%
  • 1.2em
  • 1.5rem
  • 14vw

line-height

Values: any number, including unitless

  • 1.6
  • 20px
  • 200%
  • 1.2em
  • 1.5rem
  • 18vw

font-style

Values: keywords

  • normal
  • italic
  • oblique
  • oblique 15deg

font-weight

Values: keywords, numbers

  • normal
  • bold, boldest, boldest
  • light, lightest, lightest
  • 100 - 900

font-family

Values: comma-separate list of font-names

  • sans-serif
  • Georgia, serif
  • Lobster, fantasy
  • -apple-system, sans-serif

font-family

But where do custom fonts come from?

📌

font-variant

Enables OpenType features

Values: keywords… lots of keywords

Also a shorthand

font-variant

Enables OpenType features

Values: keywords… lots of keywords

Also a shorthand

MDN: font-variant

font-feature-settings

Enables OpenType features

Values: keywords… lots of keywords

OpenType Demo

Other Type Properties

text-decoration

line, style, color

text-transform

capitalize, uppercase, lowercase, full-width

text-align

left, right, start, end, center, justify, etc

text-shadow

Value: x-offset, y-offset, blur-radius, color

text-indent

Value: any number with a unit

letter-spacing

Value: any number with a unit (except %)

word-spacing

Value: any number with a unit (except %)

white-space

nowrap, pre, pre-wrap, pre-line

text-overflow

clip, ellipsis, [string]*

* poor support

More…

  • hyphens
  • overflow-wrap
  • word-break
  • etc

Using Webfonts

3rd Party Webfonts

Various price points & subscriptions

Add a stylesheet link or JS script tag to your site

3rd Party Webfonts

Self-Hosted Webfonts

Managed in your asset pipeline & served from your domain (or CDN)

@font-face {
  font-family: "My Cool Font";
  src: url("path/to/file.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}
.cool-font {
  font-family: My Cool Font, sans-serif;
}

Self-Hosted Webfonts

Responsive Typography

Nothing Is Predictable

Screen-width is unpredictable.

Orientation is unpredictable.

Fallback fonts are unpredictable.

User zoom is unpredictable.

Basic Rules

Start with the paragraph

Readable font-size: avoid pixels

Readable line-length: 45-75 characters

Readable line-height: proportional to line-length

Scale up for headings

Pick a reasonable scale & multiply

  • paragraph: 1em
  • sub-headline: 1.2em
  • headline: 1.44em
  • headline-large: 1.73em
  • hero: 2.07em

Modular Scale

Make It Responsive

Screenshot of a site with poor hyphenation Screenshot of a site with poor word breaking Screenshot of a site with poor overflow

Make It Responsive

Screenshot of a site with poor line length

Make It Responsive

Narrower screens? Smaller modular scale.

Wider screens? Larger modular scale.

Vertical Rhythm

Consistent vertical spacing between elements

Bonus: every element’s line-height matches the rhythm

Double bonus: shift every element to baseline alignment

Vertical Rhythm

Have inline images? You’ll never have vertical rhythm.

¯\_(ツ)_/¯

Visual Hierarchy

More important things should be more visually interesting.

Don’t add more visual variety if an element is already distinct.

Think of all users; don’t rely on weak differences (e.g., color only).

p {
  font: 1em/1.4;
  color: #333;
}
h2 {
  font: 1.44em/1 bold;
  color: #112;
  /* Probably don't add all this: */
  font-style: italic;
  font-variant: small-caps;
  text-decoration: underline dashed orange;
}

Resources

Boilerplates

Sass Libraries

JS Libraries

Caution! Don’t rely on client-side JS to handle typography in real life!

Articles

Books

James Steinbach

Senior UX Developer at DockYard

jdsteinbach

Twitter | Github | Blog

jds.li/typography