Web Typography for Front End Developers
102
TYPE TODAY a primer on web typography in 2011 martha reig • cykod.com @artimated for front-end developers
-
Upload
pascal-rettig -
Category
Technology
-
view
105 -
download
0
description
Transcript of Web Typography for Front End Developers
TYPE TODAYa primer on web typography in 2011
martha re!ig • cykod.com@artimated
for front-end developers
L!"#$r!!??
WHAT I'LL COVER๏ CSS3 & @font-face
๏ Where to find fonts
๏ How to choose
๏ Combining Fonts
๏ Why you should care about typography
๏ Pre!y Things
CSS3 & @FONT-FACE
PROS๏ We have more fonts to use!
(that means we aren’t limited to the verdana, arial, georgia basics)
๏ Dynamic, selectable, printable, and easily edited text
๏ Easy to implement
๏ Smaller and faster loading pages than images
CONS๏ Easy to overuse. Lots of funs fonts don’t make good
designs, good designers make good designs
๏ Licensing - if it’s not open sourced and you don’t have a license - don’t use it
๏ FOUT (flash of unstyled text)
๏ Rendering differences (pixel perfection should be a thing of the past)
GETTING YOUR FONTS INTO YOUR SITE
Browser Support
IE4Firefox 3.5 Opera 10 Safari 3.1Chrome 4
@FONT-FACE๏ Adds “font-family” fonts you can use with CSS
๏ Currently you need to provide 4 different versions of the same font to cover all browsers
๏ Don’t worry about the specificsuse a generator like fontsquirrel.comor use a hosting service
DON’T WRITE THIS - CUT AND PASTE FROM YOUR GENERATOR
RAW CODE@font-face { font-family: "Your typeface"; src: url("type/filename.eot"); src: local("☺"), url("type/filename.woff") format("woff"), url("type/filename.otf") format("opentype"), url("type/filename.svg#filename") format("svg"); }@font-face { font-family: "Your italic typeface"; src: url("type/filename-ital.eot"); src: local("☺"), url("type/filename-ital.woff") format("woff"), url("type/filename-ital.otf") format("opentype"), url("type/filename-ital.svg#filename-ital") format("svg"); }
EXAMPLE FROM GOOGLE FONTS
LINK CODE
<link href='http://fonts.googleapis.com/css?family=FontName&v2' rel='stylesheet' type='text/css'>
STYLE AS USUAL
YOUR CSS
h2 { font-family: "Your typeface", Georgia, serif; }
WHERE TO FIND THESE COOL FONTS?
Hosted Platforms
fonts.com
Buying a License
kernest.com
Free Fonts
FontSquirrel.com
FREE PROBLEMS๏ Quality not guaranteed
๏ Unknown rendering (hinting)
๏ Poorly drawn
๏ Poorly kerned
Complete Sets
I’d Love to Go!
I’d Love to Go!
Reklame
Reklame DEMOFREE
font hinting
A font test with hinting (lower rows) and without hinting (upper rows) at 100% (above) and 400% (below). Note the increased edge contrast with the hinted text but more faithful character shape and more natural inter-character spacing in the unhinted text.
http://en.wikipedia.org/wiki/Font_hinting
Kerning
VARIATIONVARIATION
League Gothic
BEBAS
Spaces between ALL letters should be even
MY LAST 2 CENTS๏ Make sure you own the license
๏ Read the EULA
๏ Desktop licenses are not the same as web
๏ Avoid liability issues
HOW TO CHOOSE FONTS
Know your styles
Old Style Slanted serifs, a moderate transition between the thick and thin strokes of a le!erform, and a diagonal stress (the angle of a line drawn through the thinnest parts of curved le!ers).
Handgloves
HandglovesGoudy Old Style
Palatino
ModernThin, horizontal serifs, a radical difference between the thick and thin strokes of a le!erform, and a vertical stress.
Handgloves
Handgloves
Bodoni
Didot
Slab SerifThick, horizontal serifs, li!le to no difference between the thick and thin strokes, and a vertical stress.
Handgloves
Handgloves
Clarendon
Archer
San SerifNo serifs, and most o#en monoweight (the strokes are pre!y much one thickness)
HandglovesHandgloves
Helvetica
League Gothic
ScriptAnything with a flowing, handwri!en style.
Handgloves
HandglovesBello
Reklame
DecorativeWhimsical and fun. Grunge faces are a subcategory in that they are definitely decorative, but lawless and edgy, breaking the rules, trashy and trendy.
HandglovesHandgloves
HandCancelled
Stencil
Know your audience and platform
Large x-height & counters for body textthe larger the bowls on le!ers like “b” and “h” the easier your text will be to read on a screen, especially at small sizes.
Large x-height & countersGeorgia
Small x-height & countersCochin
hobo hobo
Check your 1, I, and lthe number one, capital “i”, and lowercase “L” should be distinct.
1 I lGill Sans
1 I lGeorgia
1 I lMuseo
ReadabilityAt small sizes fonts with larger variation in weights will be harder to read.
HandglovesHandgloves
Bodoni 80px
Bodoni 24px
HandglovesHandgloves
Verdana 80px
Verdana 24px
Headline Vs. Text
Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy! ", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz.
Five quacking zephyrs jolt my wax bed. Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves quart jug of bad milk. A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy! ", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz.
League Gothic as headlineDroid Serif as body
Droid Serif as headlineLeague Gothic as body
AppropriateAlways honor your content and audience first.Choose fonts that are relevant to your subject before choosing what’s new and trendy.
S!, N!.Y!% &'(’# %)$ L!"#$r $v$r*w+$r$.
replaced all headings in nytimes.com with lobster using fontfriend
COMBINING FONTS
COMBINING FONTS๏ KISS (Keep It Simple Stupid)
๏ Don't over complicate: limit yourself to 2 Styles
๏ San Serif + Serif always works
๏ avoid similar styles/classifications
Go for contrast
The Golden Ratio Heading to Body font sizeHeading font size ÷ Body copy font size = 1.96
What this really means is that if you double your body size you will almost always have enough contrast in weight from the heading.
Though the current trend is big headlines...
designingmonsters.com
underconsideration.com/brandnewconference
Limiting yourself to one font can work beautifully as well.
Julian Hansen
So You Need A Typeface by Julian Hansen
WHY YOU SHOULD CARE ABOUT TYPOGRAPHY
Good typography is the easiest way to quickly make your site look good.
But most importantly, it will make your site easier to read and navigate for users.
HIERARCHY๏ Decide what is most important
and NOT everything can be important.
๏ Make more important things are bigger.
๏ Make less important smaller.
๏ Add emphasis with color, weight and style.
You need to decide what’s important
yvettesbridalformal.com
creativemornings.com
big headline
med body
small detail
red box for emphasis
red type for emphasis
creativemornings.com
emphasisGiving emphasis to a word without interrupting the reader is important. Italic is widely considered to be the ideal form of emphasis. Some other common forms of emphasis are: bold, caps, small caps, type size, color, underline or a different typeface. No ma!er which you choose, try to limit yourself to using only one. Combinations such as caps-bold-italic are disruptive and look clumsy.
Good
The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.
Bad
The quick, brown fox JUMPS OVER A LAZY DOG. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.
SPACE๏ Keep line length readable, not too long or short.
๏ Adjust the line-height to give more
๏ White space
How Many Characters Per Line?According to Robert Bringhurst, who wrote my typography bible, 45 to 75.
Recent web studies show that 66 might be the “web ideal”
Line HeightThe quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.
The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk
MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for
quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox.
Bright vixens jump; dozy fowl quack.
The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk
MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for
quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox.
Bright vixens jump; dozy fowl quack.
NO
YES
NO
Letter SpacingCozy sphinx waves quart jug of bad milk.
Cozy sphinx waves quart jug of bad milk.
C o z y s p h i n x w a v e s q u a r t j u g o f b a d m i l k .
C O Z Y S P H I N X W A V E S
NO
YES
NO
OK
embrace white spaceNot every pixel needs to be covered in text or graphics.
White space doesn’t have to be white, it can be red, green, black, or pa!erned. It’s simply space that is le# vacant.
The vacant space makes it easier for the reader to navigate through the content of your site.
be a type rockstar
Read
Stop Stealing Sheep & find out how type works
by Erik Spiekermann & E.M. Ginge
The Elements of Typographic Style
by Robert Bringhurst
- hyphenused to separate the words in a compound adjective, verb, or adverb.
The friendly-looking man in the front is waiting for a much-needed break.
– The en dash (–) used to express a range of values or a distance
The Red Sox beat the Yankees 4–0.
— The em dash (—) used to indicate a break in thought
The pizza—with warm cheese and spicy pepperoni—was delicious.
Be Smart not Dumb
#8216; = opening single quote
’ = closing single quote
“ = opening double quote
” = closing double quote
‶dumb double quotes‶“smart double quotes”
‵dumb single quotes‵“smart single quotes”
Two spaces between sentences.Repent of this sin by using only one space.
Dumb quotes instead of smart quotes.Evil: "Thou shalt not misuse type" Good: “Thou shalt not misuse type”
Dumb apostrophe instead of a smart apostrophe.Profane: Don't use prime marks Sacred: Don’t use prime marksBy the way, apostrophes always face this way: Pot o’ gold.They never face this way: Pot ‘o gold.
Failing to tuck periods/commas inside quotes marks.Immoral: “I love type so much”, she confessed.Chaste: “I love type so much,” she testi!ed.
Failing to kern display type.Unseemly gaps can impede readability and be distracting to the reader. Adjusting the spacing between letters will assuage your guilt.
Using a hyphen instead of an en dash.Use an en dash to indicate a duration of time instead of the word “to”: the 8–10 commandments, not 8-10 commandments.
Using two hyphens instead of an em dash. An em dash signi!es a change in thought—or a parenthetical phrase—within a sentence.
Too many consecutive hyphens.It is sinful to have more than two hyphens on consecutive lines of type, and even that should be avoided.
Large amounts of bodytext in uppercase letters.IT BECOMES REALLY DIFFICULT TO READ.
Large amounts of reversed type ARE HARDER TO READ. Type on a busy background is also unreadable.
Using process colors for body text.It is harder to read, but more importantly, it is hell to register on press.
Underlining titles instead of italicizing them.Thou Shalt Not: The Holy Bible Thou Shalt: The Korán
Failing to eliminate widows.A widow is a word that sits on a line by itself at the end of a paragraph. Avoid this or risk being cast into a lake of !re and brimstone.
Failing to eliminate orphans.An orphan is the last line of a paragraph that sits alone at the top of a column or page. Type does not like to be alone.
Rivers in justified text.Unsightly large spaces between words occur if the line length is too short or the point size of the text too large.
Inconsistent leading.Paragraphs should have the same leading for each line.
Indenting the first paragraph.The !rst paragraph is never indented, subsequent paragraphs are.
Indenting a paragraph too far.The standard indent for a paragraph is 1 em, not " inch. Most software has default tabs set for " inch, so adjust the tabs.
Failing to hang punctuation into the margin.Punctuation has less visual weight than letters or numbers. Compensate for this in display text by hanging the punctuation into the margin.
Failing to use or create fractions.Wicked: 1/2 Righteous: "
Incorrectly abbreviating AM and PM.Unclean: am, AM, A.M. Relatively Clean: a.m. Clean: a.m. or AM
Failing to provide margins for type in a box.
Faux italic/oblique, bold and small cap type.Impure: Italic Pure: ItalicSinful: Bold Virtuous: BoldUnkosher: SMALLCAPS Kosher: Smallcaps
Strokes that encroach upon letterforms.Hellacious Heavenly
Horizontally scaled type.Unrepentant: Scaled Penitent: A condensed typeface
Vertically scaled type.Purgatory: Scaled Heaven: An extended typeface
Negative letterspacing.Not very readable.
Bad line breaks in headlines and body text. If you don’t break lines for sense, they can be harder to read.
Stacking lowercase letters.Vertical baselines are celestial.
Failing to indent bulleted lists.• Bulleted lists look better when the second line aligns #ush
with the !rst letter of the line above it, instead of with the bullet.
Failing to use accent marks.Sinner: No esta aqui Saint: No está aquí.
Failing to align baselines of type in adjacent columns of body text.Baselines of all columns of text on a page should align. This creates a pleasing margin of pure white space.
Failing to correct bad rags.For centered or non-justi!ed text, avoid obvious shapes (like pyramids, steps, wedges, angles and overly short or long lines).
Failing to use ligatures.unholy: holy:
thirty-four
sublim
e
eyesore
© 2008 Jim Godfrey, with Patrick Wilkey as a key contributor.
h!p:
//w
ww
.jim
godf
reyd
esig
n.co
m/t
ypeS
ins.
Thiry-Four Typographic Sins by Jim Godfrey
TIPS & TRICKS
letteringjs.com
lostworldsfairs.com/moon
preparetoactivate.com
useful tools
somadesign.ca/projects/fontfriend/
chengyinliu.com/whatfont.html
Trends
webvisionaryawards.com
snowdenindustries.com
nicewebtype.com/fonts
beercamp.com/2010
freestyle-night.ch
philipmeissnerdesign.com
collaborativefund.com
golivebutton.com
I was going to put together some demos on how to create these effects....
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
but Chris Spooner of Line25 already has some great ones.
RESOURCES๏ typedia.com
๏ typophile.com
๏ ilovetype.com
๏ alistapart.com
๏ le!ering.js
๏ ffffallback.com
๏ ifontyou.com
THANKS!
martha re!ig • cykod.com@artimated
