Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Typography

Oursky Limited
May 21, 2012
220

Web Typography

Oursky Limited

May 21, 2012
Tweet

Transcript

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus

    tellus eu justo elementum vehicula. In eu eros est, aliquam tincidunt lorem. Aliquam erat volutpat. Nullam malesuada dignissim felis. Etiam magna felis, rhoncus id hendrerit eget, porttitor et elit. Phasellus porta luctus felis ac commodo. Etiam et velit sit amet nunc ultricies gravida. Pellentesque accumsan, tortor eu auctor luctus, dui nisi porttitor augue, vel venenatis est purus nec elit. Nunc luctus vehicula nisl, at luctus est sollicitudin vitae. Monday, 21 May, 12
  2. html { font-family: sans-serif; /* Serve the machine’s default sans

    face. */ background: #fff; color: #333; } serve Helvetica to Macs and Arial to PCs Monday, 21 May, 12
  3. Ideal line length, or “measure.” “anything from 45 to 75

    characters is widely regarded as a satisfactory length of line….” Robert Bringhurst writes in The Elements of Typographic Style Monday, 21 May, 12
  4. Vertical Rhythm: Setting A Baseline /*--- HEADINGS ---*/ h1, h2,

    h3, h4, h5, h6 { margin-bottom: 24px; font-weight: bold; } h1 { font-size: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */ line-height: 1em; /* 24px --> 24 ÷ 24 = 1 */ } h2 { font-size: 1.375em; /* 22px --> 22 ÷ 16 = 1.375 */ line-height: 1.0909em; /* 24px --> 24 ÷ 22 = 1.090909(09) */ } h3 { font-size: 1.25em; /* 20px --> 20 ÷ 16 = 1.25 */ line-height: 1.2em; /* 24px --> 24 ÷ 20 = 1.2 */ } h4 { font-size: 1.125em; /* 18px --> 18 ÷ 16 = 1.125 */ line-height: 1.333em; /* 24px --> 24 ÷ 18 = 1.3333333(3) */ } h5, h6 { font-size: 1em; /* 16px --> 16 ÷ 16 = 1 */ line-height: 1.5em; /* 24px --> 24 ÷ 16 = 1.5 */ } Monday, 21 May, 12