<http://schema.org/articleBody>
"The Fontography Series is supported by join.me, the easiest way to have an online meeting. join.me lets you instantly share your screen with anyone, for free. Use it to collaborate, demo, show off \u2013 the possibilities are endless. Try it today.\nThe rise of web fonts has given way to a broader understanding \u2014 and respect \u2014 for typography, typefaces and the way text is displayed online.\nTypography is an essential part of visual design \u2014 and as any print publisher will tell you, the way that text is arranged and displayed can have an enormous impact on how its message is presented and interpreted.\nAlthough typography entered the digital age long ago, it's only been in the last few years that we've really seen advanced typography and typesetting take off online. This is, in large part, thanks to broad browser support for CSS3 and web font standards, the rise of web font services like Typekit (which was recently acquired by Adobe) and the increasing adoption of mobile devices like smartphones, tablets and ereaders.\nThe one downside of the proliferation of broader web typography is that there are more opportunities for bad typography to make its way online. Text that is presented in the wrong style or weight, line spacing and kerning that is difficult to read and other mistakes can lead to legibility and readability issues online.\nUnderstanding some of the basics in typography can make crafting web content and using web fonts a better experience for everyone.\nTypeface Types\n\n\n\n\nMost of us have heard the terms \"serif\" or \"sans serif\" but what do they mean?\nA serif typeface (or font) has strokes and other semi-structural details on the ends of letters. Fonts like Times New Roman and Baskerville are serif fonts. This is the font that most newspapers and magazines use. Georgia, one of the most popular fonts on the web, is a serif font.\nA sans serif typeface doesn't have the semi-structural details on the ends of the letterforms. Fonts like Helvetica, Arial and Gotham are serif fonts. Sans serif fonts are often more readable on smaller devices, which is why the default font on most mobile platforms is a sans serif font. Apple uses Helvetica Neue, Microsoft uses Segoe and Google recently created its own sans serif font for Android, Roboto.\nA monospaced typeface is a typeface that is non-proportional. That means that the amount of horizontal space between letters and characters is uniform. On the web, monospaced fonts are most often used when presenting computer code examples. The use of a monospaced font, especially when interspersed with standard variable-width fonts, is a visual cue that the text is a computer or code-related action. Common monospaced fonts include Menlo, Consolas and Courier.\nScript typefaces have fluid stroke designs and are aesthetically similar to handwriting. Script fonts that vary in formality and calligraphy styles, like the font Zapfino, also exist. These are most commonly used on the web for large headings and tend to perform poorly for blocks of text or in small sizes.\nKerning and Leading\nBeyond just a typeface, good web typography also utilizes good kerning and leading.\nKerning is the process of adjusting the space between characters in proportional fonts. In other words, it's how closely letters are to one another. Kerning is optimized by character pairs, whereas a technique known as tracking, adjusts the space evenly between characters.\n\n\n\n\nKerning is possible in web typography thanks to various JavaScript techniques like Lettering.js and Kern.js.\nLeading is the distance between the baselines of lines of type, in other words, the space between each line in a paragraph of text.\n\n\n\n\nLeading can drastically impact how type is read and presented. Too much leading, and type is unwieldy. Too little, and it can be hard to read. \nUsing CSS, line type can be adjusted for web fonts and standard web type.\nOther Resources\nTo learn more about typography and how it is used on the web, you can check out our earlier post on web type resources.\nTwo great resources are Typedia and Typophile, which both have their own wikis with definitions and examples.\nImage courtesy of iStockphoto, tazytaz\nSeries supported by join.me\n\n\n\n\nThe Fontography Series is supported by join.me, the easiest way to have an online meeting. Named one of Time magazine\u2019s best websites of 2011, join.me lets you share your screen so you can instantly get together, collaborate, demo, show off, and more. Plus, it\u2019s totally free. How will you use it? Check it out today.\nImage courtesy of Wikimedia Commons"^^<http://www.w3.org/2001/XMLSchema#string>
<http://mashable.com/2011/11/03/web-typography-101/>