Web Typography for Front End Developers

TYPE TODAYa primer on web typography in 2011 for front-end developers martha re ig • cykod.com @artimated

L r!!??

WHAT ILL COVER๏ CSS3 & @font-face๏ Where to ﬁnd 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 (ﬂash of unstyled text)๏ Rendering diﬀerences (pixel perfection should be a thing of the past)

GETTING YOUR FONTS INTO YOUR SITE

Browser SupportFirefox 3.5 Chrome 4 Opera 10 Safari 3.1 IE4

@FONT-FACE๏ Adds “font-family” fonts you can use with CSS๏ Currently you need to provide 4 diﬀerent versions of the same font to cover all browsers๏ Don’t worry about the speciﬁcs use a generator like fontsquirrel.com or use a hosting service

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"); }DON’T WRITE THIS - CUT AND PASTE FROM YOUR GENERATOR

LINK CODE<link href=http://fonts.googleapis.com/css?family=FontName&v2 rel=stylesheet type=text/css> EXAMPLE FROM GOOGLE FONTS

YOUR CSSh2 { font-family: "Your typeface", Georgia, serif; } STYLE AS USUAL

WHERE TO FINDTHESE COOL FONTS?

Hosted Platforms

typekit.com

fontdeck.com

fonts.com

Buying a License

myfonts.com

kernest.com

FontSpring.com

Webtype.com

Free Fonts

Google Web Fonts

FontSquirrel.com

TheLeagueofMoveableType.com

FREE PROBLEMS๏ Quality not guaranteed๏ Unknown rendering (hinting)๏ Poorly drawn๏ Poorly kerned

Complete Sets Reklame I’d Love to Go!Reklame DEMO FREE I’d Love to Go!

font hintingA 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 morefaithful character shape and more natural inter-character spacing in the unhinted text. http://en.wikipedia.org/wiki/Font_hinting

KerningVARIATION League GothicVARIATION 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 TOCHOOSE FONTS

Know your styles

Old Style Slanted serifs, a moderate transition between the thick andthin strokes of a le erform, and a diagonal stress (the angle ofa line drawn through the thinnest parts of curved le ers).Handgloves Goudy Old StyleHandgloves Palatino

ModernThin, horizontal serifs, a radical diﬀerence between the thickand thin strokes of a le erform, and a vertical stress.Handgloves BodoniHandgloves Didot

Slab SerifThick, horizontal serifs, li le to no diﬀerence between thethick and thin strokes, and a vertical stress. ClarendonHandglovesHandgloves Archer

San SerifNo serifs, and most o en monoweight (the strokes are pre ymuch one thickness)Handgloves HelveticaHandgloves League Gothic

ScriptAnything with a ﬂowing, handwri en style.Handgloves BelloHandgloves Reklame

DecorativeWhimsical and fun. Grunge faces are a subcategory in thatthey are deﬁnitely decorative, but lawless and edgy, breakingthe rules, trashy and trendy.Handgloves HandCancelledHandgloves Stencil

Know your audience and platform

Large x-height & counters for body text the 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.hobo hoboSmall x-height & counters Large x-height & counters Cochin Georgia

Check your 1, I, and l the number one, capital “i”, and lowercase “L” should be distinct.1Il 1Il 1IlGill Sans Georgia Museo

Readability At small sizes fonts with larger variation in weights will be harder to read.Handgloves Bodoni 80px Bodoni 24pxHandglovesHandgloves Verdana 80px Verdana 24pxHandgloves

Headline Vs. TextFive quacking zephyrs Five quackingjolt my wax bed. zephyrsFlummoxed by job, kvetching W. zaps Iraq.Cozy sphinx waves quart jug of bad milk. Avery bad quack might jinx zippy fowls. Few jolt my wax bed.quips galvanized the mock jury box. Quick Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx wavesbrown dogs jump over the lazy fox. The jay, quart jug of bad milk. A very bad quack might jinx zippy fowls.pig, fox, zebra, and my wolves quack! Blowzy Few quips galvanized the mock jury box. Quick brown dogs jumpred vixens fight for a quick jump. JoaquinPhoenix was gazed by MTV for luck. A over the lazy fox. The jay, pig, fox, zebra, and my wolves quack!wizard’s job is to vex chumps quickly in fog. Blowzy red vixens fight for a quick jump. Joaquin Phoenix wasWatch "Jeopardy! ", Alex Trebeks fun gazed by MTV for luck. A wizard’s job is to vex chumps quickly inTV quiz game. Woven silk pyjamas exchanged fog. Watch "Jeopardy! ", Alex Trebeks fun TV quiz game. Wovenfor blue quartz. silk pyjamas exchanged for blue quartz.League Gothic as headline Droid Serif as headlineDroid Serif as body League Gothic as body

AppropriateAlways honor your content and audience ﬁrst.Choose fonts that are relevant to your subject before choosingwhat’s new and trendy.S ,N .Y ’ L r vr w r.

replaced all headings in nytimes.com with lobster using fontfriend

COMBINING FONTS

COMBININGFONTS๏ KISS (Keep It Simple Stupid)๏ Dont over complicate: limit yourself to 2 Styles๏ San Serif + Serif always works๏ avoid similar styles/classiﬁcations

Go for contrast

The Golden RatioHeading to Body font sizeHeading font size ÷ Body copy font size = 1.96What this really means is that if you double your body sizeyou will almost always have enough contrast in weight fromthe heading.

Though the currenttrend is big headlines...

designingmonsters.com

solidgiant.com

ﬁttextjs.com

underconsideration.com/brandnewconference

Limiting yourself to one fontcan work beautifully as well.

seedconference.com

lovehelvetica.com

legistyles.com/

Julian Hansen So You Need A Typeface by Julian Hansen

WHY YOU SHOULD CARE ABOUT TYPOGRAPHY

Good typography is the easiest wayto quickly make your site look good.But most importantly, it will makeyour site easier to read and navigatefor 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 decidewhat’s important

yvettesbridalformal.com

creativemornings.com

big headline med body small detailred box for emphasisred type for emphasis creativemornings.com

emphasisGiving emphasis to a word without interrupting the reader isimportant. Italic is widely considered to be the ideal form ofemphasis. Some other common forms of emphasis are: bold,caps, small caps, type size, color, underline or a diﬀerenttypeface. No ma er which you choose, try to limit yourself tousing only one. Combinations such as caps-bold-italic aredisruptive and look clumsy.

GoodThe quick, brown fox jumps over a lazy dog. DJs flock by whenMTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawdsjog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigsvex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpyveldt fox. Bright vixens jump; dozy fowl quack.BadThe quick, brown fox JUMPS OVER A LAZY DOG. DJs flockby when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quickjigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangsjumpy 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 CharactersPer Line?According to Robert Bringhurst, who wrote my typographybible, 45 to 75.Recent web studies show that 66 might be the “web ideal”

Line HeightNO 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.YES 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 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.

Letter SpacingNO Cozy sphinx waves quart jug of bad milk.YES Cozy sphinx waves quart jug of bad milk.NO Cozy sphinx waves quar t jug of bad milk.OK C O Z Y S P H I N X WAV E S

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 navigatethrough the content of your site.

be a type rockstar

Read Stop Stealing Sheep The Elements of & ﬁnd out how type works Typographic Styleby Erik Spiekermann & E.M. Ginge by Robert Bringhurst

- hyphenused to separate the words in a compound adjective, verb, oradverb.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 distanceThe Red Sox beat the Yankees 4–0.

— The em dash(—)used to indicate a break in thoughtThe pizza—with warm cheese and spicy pepperoni—wasdelicious.

Be Smart not Dumb‶dumb double quotes‶ #8216; = opening single quote“smart double quotes” &#8217 = closing single quote‵dumb single quotes‵ &#8220 = opening double quote“smart single quotes” &#8221 = closing double quote

thirty-four h p://www.jimgodfreydesign.com/typeSins.pdfTwo spaces between sentences. Indenting a paragraph too far.Repent of this sin by using only one space. The standard indent for a paragraph is 1 em, not ½ inch. Most software has default tabs set for ½ inch, so adjust the tabs.Dumb quotes instead of smart quotes.Evil: "Thou shalt not misuse type" Good: “Thou shalt not misuse type” Failing to hang punctuation into the margin. Punctuation has less visual weight than letters or numbers.Dumb apostrophe instead of a smart apostrophe. Compensate for this in display text by hanging the punctuation into the margin.Profane: Dont use prime marks Sacred: Don’t use prime marksBy the way, apostrophes always face this way: Pot o’ gold. Failing to use or create fractions.They never face this way: Pot ‘o gold. Wicked: 1/2 Righteous: ½Failing to tuck periods/commas inside quotes marks. Incorrectly abbreviating AM and PM.Immoral: “I love type so much”, she confessed. Unclean: am, AM, A.M. Relatively Clean: a.m. Clean: a.m. or AMChaste: “I love type so much,” she testi ed. Failing to provide margins for type in a box.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. Faux italic/oblique, bold and small cap type. Impure: Italic Pure: ItalicUsing a hyphen instead of an en dash. Sinful: Bold Virtuous: BoldUse an en dash to indicate a duration of time instead of the word “to”: Unkosher: SMALLCAPS Kosher: Smallcapsthe 8–10 commandments, not 8-10 commandments.Using two hyphens instead of an em dash. Strokes that encroach upon letterforms.An em dash signi es a change in thought—or a parenthetical phrase—within Hellacious Heavenly 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

frontend2011.com

nicewebtype.com/fonts

beercamp.com/2010

freestyle-night.ch

philipmeissnerdesign.com

collaborativefund.com

golivebutton.com

I was going to put togethersome demos on how tocreate these effects....

but Chris Spooner of Line25 already has some great ones.http://line25.com/articles/using-css-text-shadow-to-create-cool-text-eﬀects

RESOURCES๏ typedia.com๏ typophile.com๏ ilovetype.com๏ alistapart.com๏ le ering.js๏ ﬀﬀallback.com๏ ifontyou.com

THANKS! martha re ig • cykod.com @artimated

Web Typography for Front End Developers

by Pascal Rettig

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 2

Statistics

Web Typography for Front End Developers Presentation Transcript