Typography

Body text

The default text when no other markup is applied. Font size is deliberately large so that it is deemed large text for colour contrast.

  • Chronicle Text Book
  • Margin after paragraph is 18 px three quarters of the font-size
  • Line-height is 32 px 1.333 or the major forth 4:3
  • Font size is 24 px which drops to 21 px for smaller screens

Headings

Unlike browser defaults which provide six distinct sizes of heading this design uses two headings. Elements h3 to h6 all have the same style applied, essentially making the body text semi-bold with slightly tighter tracking. The second type of heading is applied to the h2 element and is set small caps.

When used in articles the h2 element get additional margin above the heading.

Note in code perfer the singular to the plural. For example the class names are .page-title, .page-head and .page-subhead as oposed to header or heading.

Page title

Intended to be used once per page. It is deliberately bold and close together with negative tracking. An optional standfirst is set italic, light and middle grey.

  • Whitney Black
  • Margin after paragraph is 16 px - to align to baseline
  • Line-height is 1
  • Font size is 48 px which drops to 42 px for smaller screens

Page Head

Default heading. Set small to use blank-space as a means to draw attention instead of using a large font size. Use .page-head class.

  • Whitney Semibold
  • Small Caps
  • Font size is 24 px

Page Subhead

Intended to be used once per page. It is deliberately bold and close together with negative tracking. An optional standfirst is set italic, light and middle grey. Use .page-subhead class.

  • Whitney Semibold
  • Margin after paragraph is 16 px - to align to baseline
  • Line-height is 1
  • Font size is 48 px which drops to 42 px for smaller screens

Small Text

Used for notes, margins, footnotes in blog. And also blockquotes. Font-size is not a percentage of the current font-size bust is set on the scale.

  • Whitney Book
  • 24/33.6

Measure

abcdefghijklmnopqrstuvwxyz­­abcdefghijklmnopqrstuvwxyz­­abcdefghijklm

Blockquote

Blockquotes are set slightly smaller than running text and is offset by the same margin as lists. Where citation is given, this is right aligned with an em-dash.

Anybody can make a logo. No doubt. It’s not complicated. Just try a couple of fonts and colors, choose the one you like, then change the font a little so it becomes special.

Make it look nice. Blog about it, showing those magic construction lines. You can do it. All it needs is a little time, a computer, someone that knows how to use Illustrator, and taste, maybe. Everybody has taste, right? So let’s do it!

So thought Yahoo’s CEO Marissa Mayer, and she went and did it. How did it turn out?

—Oliver Reichenstein