Webtypogrphy Inforgraphic.Graffle
Total Page:16
File Type:pdf, Size:1020Kb
THE NEW WEB TYPOGRAPHY #1 WHAT IS A WEBFONT? + Although it is estimated that there are more than one hundred fifty thousand different digital fonts, that does not mean you can 150,000 legally use them in your web designs as webfonts. Fonts are small pieces of software subject to End User License Agreements (EULAs) which control what you can and can not legally do with them. Most fonts do not include the right to use the font with ✗ALL DIGITAL FONTS@font-face, so you should not use them. If in doubt, check with the font manufacturer before using as a webfont. f f 10! 182! 40,000@+ ! ✔CORE WEB FONTS ✔WEB SAFE FONTS ✔WEBFONTS Microsoft licensed ten typefaces to be installed on all PCs. Both Mac and Windows computers have a list of fonts that Webfonts are downloadable font file that can be used by a Apple also provided the same fonts, making them the most are always installed. Additionally, commonly installed Web browser to display text. Webfonts come in different commonly available typefaces, and thus the default choice software such as Microsoft Office and Apple iLife include formats which are supported by different browsers, but for most designers. The list originally included 11 typeface, more fonts. From this, we can derive a list of one-hundred virtually all browsers support Webfonts now, including but Microsoft no longer includes Andale Mono. eighty-two additional fonts that are commonly installed on Internet Explorer. Of the 100K digital fonts, around forty most computers. For the full list, visit http://bit.ly/web- thousand have been licensed for @font-face usage and the safe-fonts . list is constantly growing. 5 66 &! FIVE FATAL FIVE FONTS COMMON DENOMINATORS WEBFONT FORMATS Although there are 10 core webfonts, only five are Sixty-six of the Web Safe Fonts are commonly installed on Although virtually all web browsers support webfonts commonly used in web designs: both Macs and Windows machines, making them the sweet today, not all of them support the same font fie formats. spot for cross platform design. There are five basic formats supported, with the following Arial file extensions. Browser support with first version support Arial Narrow • Arial Rounded MT Bold • Baskerville Old Face • Bauhaus was included is listed in the table below. Georgia 93 • Bell MT • Book Antiqua • Bookman Old Style • Bradley Hand Times New Roman ITC • Britannic Bold • Brush Script MT • Calibri • Calisto MT • Cambria .eot — Embedded Open Type Trebuchet MS • Candara • Century Gothic • Century Schoolbook • Colonna MT • .ttf — True Type Format Consolas • Constantia • Cooper Black • Copperplate Gothic .otf — Open Type Format Verdana Bold • Copperplate Gothic Light • Corbel • Curlz MT • Edwardian .svg — Scalable Vector Graphic Script ITC • Engravers MT • Footlight MT Light • Franklin Gothic Medium • Garamond • Gill Sans MT • Gill Sans Ultra Bold • .woff — Web Open Font Format Gloucester MT Extra Condensed • Goudy Old Style • Haettenschweiler • Harrington • Imprint MT Shadow • Lucida Bright • Lucida Calligraphy• Lucida Console • Lucida Fax • Lucida Sans • Lucida Handwriting • Lucida Sans Typewriter • Lucida Sans WEB FONT or WEBFONT? • • MS Reference Sans Serif • Modern No. 20 • Onyx • Unicode Mistral A "web font" or "webfont" is any font used to style HTML • • • • Playbill • Palatino Papyrus Perpetua Perpetua Titling MT text. Both versions of the word are acceptable (with or FONT, FAMILY, or TYPEFACE? Rockwell • Rockwell Extra Bold • STENCIL • Tahoma • Tw Cen MT • Wide Latin without the space) but Webfont is becoming increasingly The terms font and type face are often used synonymously, common, especially when referring to fonts delivered using although they are not the same thing. A typeface — also @font-face. referred to as a font family. — is a collection of similar fonts but with different weights or styles. For example, Times is a type face. A font is a particular weight or style within the typeface. For example Times Bold is a font. Despite this, most people will refer to a "font" when they really mean font family. I'll use family to refer to a group of FORMAT fonts and font for individual styles. Internet Explorer Firefox Safari Chrome Opera iOS Droid Blackberry EOT/EOT Lite ! 4 TTF/OTF ! 3.5 ! 3.1 ! 10 ! 4.2 ! 2.2 ! 6 WWW.FLUIDWEBTYPE.INFO SVG/SVGz ! 3.1 ! 0.3 ! 10 ! 3.1 WOFF ! 9 ! 3.6 ! 6 ! 11 ADDING WEBFONTS TO YOUR DESIGN NOTE: The ?#iefix after the .eot extension is To add a font to your Webpage, use the @font-face needed in order for the code to work in Internet rule. Although in theory only one source is needed, in order Explorer before v9. For the full story on this, visit: to accommodate different browsers, you will need to add http://bit.ly/bulletproof-font-face-syntax . source for the different file types you want to support. @font-face { font-family: 'My Font Name'; /fonts src: url('../fonts/myfont-webfont.eot'); myfont-webfont.eot src: url('../fonts/myfont-webfont.eot?#iefix') format('embedded-opentype'), myfont-webfont.svg url('../fonts/myfont-webfont.woff') format('woff'), url('../fonts/myfont-webfont.ttf') format('truetype'); myfont-webfont.ttf font-weight: normal; font-style: normal; myfont-webfont.woff } .mySelector { font-family: 'My Font Name', serif; } @! Created By: Jason Cranford Teague | [email protected] www.fluidwebtype.info t: @fluidwebtype Updated: Wed May 25 2011.