Typography for Developers

Typography for Developers Marko Dugonjić @markodugonjic

composers +performers

EnvironmentChoosing a typefaceClean startSe ing textTabular dataPerfect layout

Know yourenvironment

Zoom in le er ‘a’ low resolution screen example vs Clear Type vs Mac

How to choose a typeface?

There is no kerningwith CSS, only tracking.

Most of the fonts throwawkward kerning pairs forany language that isn’t thedesigner’s mother tongueor English.

To check the kerning, turnthe type upside down.

Kerning gametype.method.ac

serif orsans-serif

The more detailed the fontthe poorer it rendered onlow-resolution screens.

When set to 16px, eachdetail occupy more pixels.

The preparation

Browser warsnever ended

Reset Everything™

* { margin: 0; padding: 0;}

html { font-size: 62.5%; /* 16px x 62.5% = 10px */}

HIGH CONTRAST

.white-on-black { color: #ccc; background: #000;}.black-on-white { color: #444; background: #fff;}

HIGH CONTRAST

Embedding fonts

Try to matchle er spacing & x-heightof the typefacesin the CSS font stack

The Font Stack- the ﬁrst choice typeface,- nearest alternative,- platform speciﬁc alternatives,- universal alternatives,- generic

Control @font-faceembedded fonts withcorresponding CSSproperties

@font-face { font-family: Custom Font; font-weight: bold; src: url(BOLD-webfont.woff) format(woff);}@font-face { font-family: Custom Font; font-weight: 600; src: url(SEMIBOLD-webfont.woff) format(woff);}@font-face { font-family: Custom Font; src: url(REGULAR-webfont.woff) format(woff);}/* WARNING: Opera 10 accepts only the last declaration */

Text size and leading

The longer the line, themore space you needbetween each line.

p,li,th,td { font-size: 1.6em; line-height: 1.5em; /* 16px/24px */}

Don’t overdo it.

Text hierarchy

10 11 12 14 18 21 24 36 48 60 72

h3, h2, h1 { font-weight: bold; line-height: 1.5em;}h3 { font-size: 1.6em; }h2 { font-size: 2.4em; }h1 { font-size: 3.2em; }

Big size headlines oenbeneﬁt from negativele er spacing andtighter leading.

.display-text { font-size: 12.8em; letter-spacing: -3px; line-height: 1em;}

Vertical rhythm

Design vertical spacing sothat aer a number of lineseverything falls correctlyonto a single baseline.

p { margin-bottom: 1.5em; /* margin-bottom = line-height */}ul, ol { margin-bottom: 2.4em /* 1.6em (<li>) x 1.5em */}

Data tables

Data in tables should betreated like any othercontent and shouldn’t liveisolated in a cage.

<table cellspacing="0" cellpadding="0" />table { border-collapse: collapse; margin-bottom: 2.4em;}

th, td { border-top: .1em solid #ccc; padding: .74em 1em .75em; vertical-align: top;}.numeric { text-align: right; font-family: Anonymous Pro, monospace;}

<table cellspacing="0" cellpadding="0" />table { border-collapse: collapse; margin-bottom: 2.4em; table-layout: fixed; width: 100%;}

The layout

Anyone can create adecent page design with ali le help from an old friendfrom school ‘mathematics’.

text?(meta) data? images? video?

Standard ads sizes arequite handy to establishsome basic horizontalrhythm.

728 x 90

160 x 600

300 x 600

300 x 250

~ 500px 300px

(20 + 300 + 20) * 1.61 = 547 ~ 550 = 20 + 510 + 20

Check the vertical rhythmevery once in a while.

Easy, eh?

Learn moreexplorationsintypography.com thinkingwithtype.com

Merci!@markodugonjic

Exercise anyone?

1. Choose a typeface and fallbacks2. Set basic font-size and leading for P, LI, H1, H2 and H33. Create vertical rhythm with a baseline of 36px4. Design simple table with numeric data and align columns5. Design 2- or 3-column layout based on 300px wide ad

http://www.maratz.com	2400
http://localhost	105
http://paper.li	89
http://lanyrd.com	37
http://www.bharchitects.com	20
http://www.paris-web.fr	18
http://twitter.com	17
http://feeds2.feedburner.com	15
http://feeds2.feedburner.com	15
http://a0.twimg.com	11
http://translate.googleusercontent.com	11
http://us-w1.rockmelt.com	8
http://smaug.createit.local	5
http://www.perspagina.nl	4
https://twitter.com	4
http://www.maratz.com.	3
http://drizzlin.com	2
http://smaug.createit.local:1080	2
http://www.slideshare.net	1
http://127.0.0.1	1
http://feeds.feedburner.com	1
http://www.bbvatech.com	1

Typography for Developers

by Marko Dugonjić on Sep 11, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

22 Embeds 2,770

Statistics

Typography for Developers — Presentation Transcript