History and Advancements in Web Typography

Throughout the web’s 20 year history, “web typography” and the “web” have never played well together. Although there have been major advancements in both hardware and software, the fonts we see and the layouts we’re used to have been relatively unchanged. As all things must change, there are advancements on the horizon that will soon change the way we view web design.

Web typography trends aren’t just about an availability of typefaces. Browsers have to also step up their game to offer new fonts and type styles.

History of Web Typography – the short version

Tim Berners-Lee created his first web page in 1990 and every since then we’ve been at the mercy of the viewers fonts available on their computers. Then came the 10 “Core Web fonts” made available by Microsoft and Apple on every computer they sold. But let’s face it out of all the available fonts, only a core group of five typefaces, Arial, Georgia, Times New Roman, Tebuchet MS, and Verdana, became what most web users saw for the past 20 years. So in essence our web typography user experience up to this point has been very limited like only listening to five music notes in a world full of sound.

During the 1990s and 2000s print designers were revolutionaries pushing the boundaries of digital type. But when it came to web typography, with only five type choices, it’s hard to reinvent the wheel so-to-speak. Like many other great advances in technology, the problem wasn’t the availability of new web typography. The problems existed because of money, licensing, and legal issues. Microsoft Internet Explorer’s browser has had Embedded Open Type since 1997, but in the aftermath of stolen intellectual property in the movie and music industry, type foundries were reluctant to release their fonts for fear of being jacked.

So what changed? Leave it to the “Che Guevera’s” of the computer industry Apple. In 2008 Apple release Safari 3.1 which allowed the web browser to download an Open Type (OTF) or True Type (TTF) font file. Google Chrome, Firefox, and Opera were right on their heels, but Microsoft held out on Internet Explorer while developers quickly created hacks to convert popular font formats to the EOT format.

Then in 2009, in came the Web Open Font Format specially tailored for the web. This provided the necessary protection type foundries needed to protect their intellectual property from theft. So as of 2011, nearly every web browser supported web fonts in some format and the availability of legally created web fonts skyrocketed to the tens of thousands. This new found freedom creates just as much anxiety as it does the freedom to use them as most of these fonts were made for print use so their functionality can be questionable on different devices and browsers. But revolutionary designers seem to have no problem with the trial and error process of creating something new, bold, and engaging.

10 Trends to look out for in Web Typography

Responsive Typography – Web typography changes per the device; tablet or smartphone.
Mixing Font Weights – More fonts weights will allow designers to mix and match for typographic contrast.
Larger Font Sizes – The bigger the screen resolution, the bigger the fonts size. As a general rule 12pt – 14pt type should be used.
More Space – “Above the fold” is dead, users these days are “scrollers” so open up your design.
Dingbats instead of images – Dingbats allow you to change the colors and sizes of icons without fidelity loss.
Typographic Voice Diversity – This is where typography is used to tell half the story.
Letterpress and other type effects – CSS3 allows you to use text effects and add emphasis without the use of italics or bold.
Handwritten Fonts – What typefaces shout louder than handwritten fonts.
Color Contrast – Varying color contrast allows designers to guide the viewers eye.
Slab Serif Fonts – Easy-to-read type with a strong voice that’s great for the screen.

The Future of Web Typography

Now that the bans have been lifted so-to-speak, designers will begin to flex their muscle with the use of new web typography and typographic techniques provided by CSS3. To take it a step futher, CSS4 is already in develpoment ans will afford even more type styling effects. Firefox being the trailblazer that it is, is fastly unlocking the Open Type capabilities that were once only available in the world of print in softwatre like QuarkXPress and Adobe InDesign. This will alow designers ot utilze small caps, old style numbers and other characters to separate themselves from the masses.

With new power comes new responsibilities and even though we’ve made these advancements, the uprising of tablets and smartphones will begin to once again limit how text is viewed. At least we’ve turned a corner, and the rise of new web typogrpahy will inspire designers to lead a renaissance in type design for the screen.