Typography for the Web Kayla Hardy
Review of the Basics Typeface: a family of fonts example: Garamond Two main types of typefaces: Serif: has feet Sans Serif: without feet Font: A specific weight and size of a typeface example: Garamond bold 12 pt Mixing fonts in a document creates structure, hierarchy and visual interest However, you don t want too many fonts in one page, usually 2-4 is good
Basic Anatomy Hefty BASELINE descender serif ascender CAP HEIGHT X-HEIGHT For more about type http://www.thinkingwithtype.com
Legibility The ability to distinguish each letter in a font Several factors that make a font legible White space: good balance between the letter forms and the white spice in and around them Ascender and descenders: long ascenders and descenders which help distinguish between letters X-height: generous x-height provides plenty of space inside the letters Stroke: even strokes with less contrast that are not too thick or thin
Readability How easily and comfortably a block of text can be read A legible font is important for readability, but there are other factors Line spacing: generous line spacing, but close enough that you can easily distinguish between chunks of text Line length: medium length lines, about 86 words is ideal Alignment: left alignment provides a vertical edge for reading (justified does the same, but can stretch the word and letter spacing which will decrease readability) Sans serif typefaces are considered more readable than serif, both are more readable than a decorative or script typeface
Emotional Associations As a society certain typefaces have certain connotations Using the wrong style typeface can create dissonance between the feeling it communicates and the message of the text Serif typefaces feel traditional Sans serif typefaces feel modern Decorative typefaces (like script or handwriting typefaces) can convey a variety of feelings based on the design Decorative typefaces are very difficult to use, they are generally not necessary and often look unprofessional
Why It s Important Readability and the emotional associations people have with a font affect how they receive the information you are presenting to them The majority of content on most sites is text Therefore, typography is often the key to good website design. You can have great images and effects, but if the type is bad the message will get lost
Web Safe Fonts Fonts in a webpage are are taken from the font library on the computer of the individual looking at the page Web safe fonts are fonts that everyone should have on their computer, therefore they are safe to use There are only 8: Georgia, Verdana, Times New Roman, Arial, Trebuchet MS, Impact, Courier & Comic Sans MS What if you want to use a different font? For example, you want to use the same font as the existing logo There are a few ways to do it
Font Stacking A CSS technique is which you choose the font you want and then provide multiple back up options of a similar style in the event that the users computer doesn t have your first choice. Example: h1 { Font-family: Garamond, 'Hoefler Text', Georgia, serif; } http://www.cssfontstack.com will tell you the percent of machines that your font is available on, and give you suggestions for back up fonts This is a free and easy option, but give you little control Web Fonts are a better option
Web Fonts Fonts saved in a format to be used on the web Hosted on the server and use the CSS3 @font-face declaration to link to the font, retrieve it from the server, and then display it You can host fonts on your server or use a web font service Legal note: Be sure to check that the font s licensing agreement allows the font to be used on the web. You can find websites that will convert a desktop font into a web font, this generally violates the licensing agreement and shouldn t be done
Web Font File Types A variety of different font files: Embedded OpenType (EOT), TrueType (TTF/OTF), Scalable Vector Graphics (SVG), & Web Open Font Format (WOFF & WOFF 2.0) WOFF is a font format created for use in web pages Developed in 2009, it became a W3C Recommendation in 2012 WOFF is currently supported on all major browsers (but not all older versions) If you want to ensure your font will be displayed in as many bowser versions as possible you can host a version of the font in all 4 file types
Self Hosted Web Font There are many sites where you can purchase and download fonts which you can host on your server FontShop: https://www.fontshop.com MyFonts: http://www.myfonts.com FontSpring: some free options http://www.fontspring.com Fontspring provides easy to use packages that provide you will all the files you need to host the fonts on your own server including a CSS file with the @font-face declaration
Self Hosted Web Fonts Self hosting fonts is simple: First, place all the font files on the server in the same folder as your CSS Second, in your CSS use the @font-face declaration to define your font and point to it s location Once you have the @font-face declaration you can use your font anywhere in your CSS document Note for self hosted and web font services: it is still a good idea to use font stacking even when using web fonts incase something goes wrong
Example @font-face @font-face { font-family: 'droid_sansregular'; src: url('droidsans-webfont.woff') format('woff ); font-weight: normal; font-style: normal; } Body { } font-family: droid_sansregular, Arial, sans-serif;
Web Font Services A variety of web font services at varying prices GoogleFonts: free http://www.google.com/fonts/# Typekit: yearly subscription (free option) https://typekit.com Fontdeck: annual price per font http://fontdeck.com Cloud.typography: yearly subscription http://www.typography.com/cloud/welcome/ When using a web font service: first you choose the fonts you wish to use, then provide them with your websites information, next they provide you with a script to include in your webpage. Once the script is placed in your webpage the font can be used in your CSS
The HTML: <!DOCTYPE html> Example <head> <script src="//use.typekit.net/pcj6rhu.js"></script> <script>try{typekit.load();}catch(e){}</script> </head> The CSS: body { font-family: adelle sans, helvetica, arial, sans-serif; }
Which is better? Self Hosting fonts Pro: You own the font, don t have to worry about it no longer being offered etc. Pro: Not reliant on a third party server Con: Limited free options, can be very expensive Web Font Services Pro: Quick and easy Pro: Wide variety of pricing options, including free options Con: Completely reliant on a third party server, if their server is down your fonts are gone
More Information W3schools CSS3 web fonts: http://www.w3schools.com/css/css3_fonts.asp Type on Screen by Ellen Lupton ISBN 978-1616891701 http://www.amazon.com/type-screen-critical-designers- Developers/dp/161689170X Laura Franz s Lynda courses (a little older but lots of good info about typography) http://www.lynda.com/design-typography-tutorials/ Choosing-Using-Web-Fonts/97715-2.html? org=simmons.edu http://www.lynda.com/web-fonts-tutorials/typographyfor-web-designers/79411-2.html?org=simmons.edu
References Hazlett, R. L., Larson, K., Shaikh, A. D., & Chaparo, B. S. (2013). Two studies on how a typeface congruent with content can enhance onscreen communication. Information Design Journal (IDJ), 20(3), 207-219. doi: 10.1075/idj.20.3.02haz Josephson, S. (2008). Keeping Your Readers' Eyes on the Screen: An Eye-Tracking Study Comparing Sans Serif and Serif Typefaces. Visual Communication Quarterly, 15(1/2), 67-79. doi: 10.1080/15551390801914595 KOCH, B. E. (2012). EMOTION IN TYPOGRAPHIC DESIGN: AN EMPIRICAL EXAMINATION. Visible Language, 46(3), 206-227.