black hats and black coats, and they ride on broomsticks. But this is not a fairy-tale. This is about REAL WITCHES. ‘Legibility’ means text can be interpreted. • We read shapes, we don’t read words. • Letters carry more of their identifying features in their top halves. In fairy-tales, witches always wear silly black hats and black coats, and they ride on broomsticks. But this is not a fairy-tale. This is about REAL WITCHES.
COATS, AND THEY RIDE ON BROOMSTICKS. BUT THIS IS NOT A FAIRY-TALE. THIS IS ABOUT REAL WITCHES. In fairy-tales, witches always wear silly black hats and black coats, and they ride on broomsticks. But this is not a fairy-tale. This is about REAL WITCHES. Readability Just because something is legible doesn’t mean it’s readable. • Not ‘can you read it’, but ‘do you want to read it’ • Length, font, colour, case etc. all has an impact Web Typography Reading
limited number of typefaces available: Arial, Georgia, Verdana, Tahoma, Times, Lucida Sans, Comic Sans, plus a few more… The alternative was to embed images of text: • Bad for accessibility • Difficult to maintain on a large scale • Can pixellate with compression • Poor SEO Web Typography History
alternative. sIFR (Scalable Inman Flash Replacement) used Macromedia Flash to replace text with encoded fonts. Good because: • More accessible • More variety / choice Bad because: • Slow • Reliant on Flash being installed • Reliant on Javascript
alternative. Cufón converts fonts into vector graphics and stores them in JSON data format. Good because: • Not reliant on Flash • More variety / choice Bad because: • Fonts are unencrypted • Can’t select / search text • Reliant on Javascript
alternative. @font-face is a CSS declaration that allows you to reference a font file (that’s hosted online) to use when rendering text on a Web page. Good because: • More accessible! • More variety / choice! • Not reliant on Javascript! Bad because… • Nothing! (Other than being unencrypted and open to being stolen)
fonts differently. OSX is particularly good. Windows is particularly bad. Especially older versions. Most fonts aren’t hinted and optimised for Web. Many font vendors simply convert typefaces into web-friendly file formats. However without proper hinting they can render terribly. We must test in-browser.
weights and styles we include, the longer the load time. Having said that, there’s a minimum we should aim for: • Regular • Italic • Bold • Bold italic For ‘body’ copy, if we don’t include these as a minimum, we’re leaving it up to the browser to ‘make them up’ (we all know how ugly faux-bold is in Photoshop).
/ Hyphenation In the most modern browsers, these are now possible. However we need to consider: • Does our web typeface include these features? • How much extra file-size does it add? (And is it worth it?) • How does it gracefully degrade in browsers that don’t support it?
Line spacing in print is not the same as line-height on the Web. Line spacing = the distance from baseline to baseline line-height = the distance between the mid-points in the space above and below a line of text Line spacing Abcdefghijklmnop qrstuvwxyz line-height Abcdefghijklmnop qrstuvwxyz Space added from base-line to base-line. Equal space added above and below each line of text.
platforms and distributed to your website using Javascript. Good because: • Secure / no theft issues • Hinted / fully tested (usually) • Cost-effective • Always up-to-date tech • Flexible Bad because… • Slower than self-hosted • Might see more FOUT* • Reliant on Javascript *FOUT stands for ‘Flach of unstyled text’.
webnaut
morogyro
muture
terencebasart
noppefoxwolf
sayadesign2
mukai_takeru
baku89
takanorip
culumu
a2k
kgsi
ryanjones
jdejongh
tammielis
eileencodes
kimpetersen
schlessera
akademiya2063
lfama
shpigford
baasie
honnibal
reverentgeek
