Finding, Testing, and Using Web Fonts Laura Franz, University of Massachusetts Dartmouth 1
Total Page:16
File Type:pdf, Size:1020Kb
Finding, Testing, and Using Web Fonts Laura Franz, University of Massachusetts Dartmouth 1 Finding, Testing, and Using Web Fonts Laura Franz, University of Massachusetts Dartmouth Where should I get my fonts? There is no wrong or right answer. It depends on your needs. • Ease of use (how much CSS do you need/want to know/use? How easy is the interface?) • Control/ownership (do you or your client want to own the font license?) • Cost • Quality • Availability of specific fonts (do you or your client need a specific font?) • Availability of desktop fonts for mock-ups • Screenshots of how fonts work cross browser Web font providers in alphabetical order (leaving out those with confusing interfaces and pricing plans): Self Host? Host on Desktop fonts Screenshots Pricing Fee Free Trial their for mock-ups of fonts cross Schedule available? server? provided? browser? Fontdeck No Yes No No Pay per font. Example: Din Text Pro Annual Yes (each weight/style charged separate- ly) $12.50/year. (1m page views) Fonts.com Yes, with Yes Yes, with Pro Yes Standard plan (500,000 monthly Monthly Yes Pro Plan Plan page views) is $20/mo. Pro plan is $100/mo. FontSpring Yes No Yes (otf) No Purchase font licenses. A full One Free fonts family (3–14 weights and styles) Time available costs $0–$300. Fee FontSquirrel Yes No Yes (otf) No Free None Free Google Web Fonts Yes Yes Yes No Free None Yes Justanotherfoundry No Yes No No Each family (all weights and styles, Annual Yes 2gb/Month traffic) €19/year myfonts.com Yes No Yes, with Yes Futura (6 weights and styles) 10,000 One Yes higher plan monthly views $133.68. (500,000 Time monthly views $1,005.30, and they Fee throw in desktop font for 1–5 users) Typekit No Yes No Yes Plans start at $24.99/year. Port plan Annual Yes (500,000 page views) $49.99/year Typotheque Yes, for a Yes No No Purchase font licenses. Fedra Sans One Yes higher fee Screen (4 weights and styles) web Time font €78. Fee WebINK No Yes Yes (PShop No Pro plan (80,000 unique visitors) Annual Yes plug-in) $50/year Webtype Yes, for a Yes No No Per font. Example: 6 weights Annual Yes higher fee and styles of Gill Sans $480/year (500,000 monthly page views) Finding, Testing, and Using Web Fonts Laura Franz, University of Massachusetts Dartmouth 2 How do I make sure a font is good? Good fonts are legible, can do the job at hand, and hold up cross browser. • Choose a font that retains legibility on screen (especially when setting text). • Make sure the font has all the weights and styles you need. • Test the font in context. See the font in a size, line-height, line-length similar to the final page. • Resource: Tim Brown’s Web Font Spec Sheet — webfontspecimen.com • Resource: test fonts from webINK on a page — www.webink.com/fontdropper • Resource: test fonts from Fontfont on a page — fontfonter.com/ • Test the font cross browser. Web fonts on macs tend to look thicker and fuzzier, while on pcs type looks thinner and jagged. Fonts that have not been hinted properly lose their structural form on different browsers and at different sizes. Do not choose a font without seeing how it will look on other browsers! • Resource: test fonts live cross browser — crossbrowsertesting.com • Resource: some font providers offer screenshots of fonts cross browser — typekit.com, fonts.com, myfonts.com • Resource: fonts that have been tested cross browser — goodwebfonts.com How do I make sure weights and styles work properly? First, always make sure your font has all the weights and styles you need. Then, set them up to work cross browser. • In google web fonts, avoid problems in ie 7 & 8 and Opera. Use a conditional comment to link to each font weight and style. • Example (serving Droid Serif from Google Web Fonts) In the head: <link href=’http://fonts.googleapis.com/css?family=Droid+Serif: 400,400italic,700,700italic’ rel=’stylesheet’ type=’text/css’> <!--[if IE]> <link href=’http://fonts.googleapis.com/css?family=Droid+Serif’ rel=’stylesheet’ type=’text/css’> <link href=’http://fonts.googleapis.com/css?family=Droid+Serif: 400italic’ rel=’stylesheet’ type=’text/css’> <link href=’http://fonts.googleapis.com/ css?family=Droid+Serif:700’ rel=’stylesheet’ type=’text/css’> <link href=’http://fonts.googleapis.com/ css?family=Droid+Serif:700italic’ rel=’stylesheet’ type=’text/css’> <![endif]--> • Resource: www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles- google-web-fonts/#more-134528 Finding, Testing, and Using Web Fonts Laura Franz, University of Massachusetts Dartmouth 3 • When setting text with the @font-face declaration, avoid problems in ie 7 & 8. Use both unique font-family names and style-linking. • Example @font-face { font-family: ‘UbuntuLight’; src: url(‘Ubuntu-L-webfont.eot’); src: url(‘Ubuntu-L-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘Ubuntu-L-webfont.woff’) format(‘woff’), url(‘Ubuntu-L-webfont.ttf’) format(‘truetype’), url(‘Ubuntu-L-webfont.svg#UbuntuLight’) format(‘svg’); font-weight: 300; font-style: normal; } @font-face { font-family: ‘UbuntuLightItalic’; src: url(‘Ubuntu-LI-webfont.eot’); src: url(‘Ubuntu-LI-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘Ubuntu-LI-webfont.woff’) format(‘woff’), url(‘Ubuntu-LI-webfont.ttf’) format(‘truetype’), url(‘Ubuntu-LI-webfont.svg#UbuntuLightItalic’) format(‘svg’); font-weight: 300; font-style: italic; } .u300{ font-family: ‘UbuntuLight’, verdana, sans-serif; font-weight: 300; font-style: normal; } .u300i{ font-family: ‘UbuntuLightItalic’, verdana, sans-serif; font-weight: 300; font-style: italic; } • Resource: www.smashingmagazine.com/tag/typography/ What fonts are other people using? Resource: “What Font Tool” identifies fonts on the page — chengyinliu.com/whatfont.html Resource: “Just My Type” highlights some nice font pairs — daneden.me/type/ Finding, Testing, and Using Web Fonts Laura Franz, University of Massachusetts Dartmouth 4 How can I improve the readability of my site? Readers read in three ways. • Scanning with purpose • Casual reading • Sustained reading Readability is a factor of legibility, size, line-height, line-length, and chunking. • Legibility — larger x-height, open apertures, strokes not too thick or too thin, gener- ous counterforms. Help keep letters from filling in or blowing out cross browser. • Font-size — depends on the font. Smaller x-heights need to be bigger. 15px is a good starting point (people read screens at a greater distance and the text is back-lit). • Line-height (leading) — start at 150% font-size. Help readers scan horizontally across lines as well as down the text. Larger x-heights need more line-height. • Line length — 75 to 95 characters (including punctuation and spaces) per line. Avoid doubling (reading too-long lines twice) and choppy text (too-short lines). • Chunking — online text needs more visible chunking. Use paragraph spacing rather than indentation for text usually scanned. Good paragraph space is 66 to 75% of line height. • Hierarchy — online text needs slightly more contrast between levels of hierarchy. Example: make a subhead bold + 1 or 2 px bigger. Help readers find what they are scanning / looking for. Fallback fonts Always use fallback fonts. Otherwise you have no control over what font loads if web font fails. • Specify web safe fonts — usually Verdana/Arial or Georgia/Times New Roman. Others are Courier, Impact, Comic Sans, Trebuchet ms • Before the web safe font, you can specify a preferred font your readers are likely to have on their computer (e.g., Arial Black). • Test the fallback fonts. Trick: add “X” in font name so it fails. You might prefer one web safe font over another for copy fitting and hierarchy. • Fallback fonts won’t match chosen web font. Choose a font with similar structure. If web font doesn’t load, aim for readability (bulleted items above). Can your reader still easily find and read what they want or need? • Embrace flexibility. Everything doesn’t have to look the same all the time. This is not print. If web font doesn’t work and readers have to read text in Arial or Times New Roman, civilizations will not fall (see “The Rules of Typography According to Crack- pots Experts” by Jeffrey Keedy. Looking Closer 2, New York: Allworth Press, 1997) Additional Resources • Character Entity References — digitalmediaminute.com/reference/entity/index.php • @font-face syntax — www.fontspring.com/blog/further-hardening-of-the- bulletproof-syntax • Troubleshooting @font-face syntax — www.fontspring.com/support/troubleshooting.