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 – the possibilities are endless. Try it today.
The rise of web fonts has given way to a broader understanding -- and respect -- for typography, typefaces and the way text is displayed online.
[More from Mashable: 5 Ways Tech Companies Are Committing to Sustainability]
Typography is an essential part of visual design -- 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.
Although 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.
[More from Mashable: YouTube’s 20 Most-Shared Ads in October [VIDEOS]]
The 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.
Understanding some of the basics in typography can make crafting web content and using web fonts a better experience for everyone.
Typeface Types
Most of us have heard the terms "serif" or "sans serif" but what do they mean?
A 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.
A 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.
A 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.
Script 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.
Kerning and Leading
Beyond just a typeface, good web typography also utilizes good kerning and leading.
Kerning 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.
Kerning is possible in web typography thanks to various JavaScript techniques like Lettering.js and Kern.js.
Leading is the distance between the baselines of lines of type, in other words, the space between each line in a paragraph of text.
Leading 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.
Using CSS, line type can be adjusted for web fonts and standard web type.
Other Resources
To learn more about typography and how it is used on the web, you can check out our earlier post on web type resources.
Two great resources are Typedia and Typophile, which both have their own wikis with definitions and examples.
Image courtesy of iStockphoto, tazytaz
Series supported by join.me
The Fontography Series is supported by join.me, the easiest way to have an online meeting. Named one of Time magazine’s 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’s totally free. How will you use it? Check it out today.
Image courtesy of Wikimedia Commons
This story originally published on Mashable here.
There are no comments yet