Connor BrookeWhen you go to a website, what catches your eye? Most people might say ‘the pictures.’ There is a lot of focus on the imagery of a site, but the typography can be not only as eye catching, but even more important. The text on your site is where viewers will get their information, so it needs to be clear, catchy, and precise; it can both make and break a site’s theme. CSS3 has taken the next step forward in design to provide designers with a huge new tool called @font-face, which lets designers, for the first time, easily upload a web-acceptable font to a server and be used for a site.
To give you a little background of why this is so important, here’s a short history of the world of web fonts:
There was a time when there were only 18 acceptable fonts to use on the web, as there were only 18 fonts that Windows, Mac, and Linux all came installed with. These may sound familiar. Just a few are: Arial, Comic Sans MS, Courier New, Georgia, Impact, Tahoma/Geneva, Times New Roman, Trebuchet MS, Verdana, and good ole Webdings.
Choosing a font beyond those 18, a designer was taking a very risky chance. A visitor’s computer might not have the font specified by a designer’s code. If this is the case, this code forces the computer to display either the closest match it is or it revert to the browser’s default.
How do you get avoid that from happening?
To use anything outside of those 18 fonts and make sure every viewer always saw it correctly, the text had to be hard coded as an image.
Easy switch, right? Not quite.
Forcing the text to be an image is more time consuming to update, harder for a site to be easily updated by anyone but the designer, and most important of all, it can’t be read by search engine crawlers to help with the site’s SEO. It left site designers to choose between two options at times – better looking design or something more SEO accessible.
Then came along Google Web Fonts, a repository for web acceptable fonts that could be called with a very easy-to-implement piece of code that pulled from the web, which allowed any computer visiting the site to ‘have’ that font available for use. 600+ font families that designers knew they could use without concern of a viewer having that font. Google Web Fonts provides a new wealth of font combinations, typography layouts, and nearly as equally, the ability to destroy a site with a poorly chosen font. Once this bit of code was implemented in the header of a site, it could be used in the CSS styling the same as if a designer was using a font pulled from a person’s computer.
Yet that was only just above 600 fonts. Out there, available for free or license, are thousands upon thousands of fonts! Again, there came the limit of needing to choose a standard or Google font or hard code it into an image. CSS3 came and answered that issue with @font-face.
Now, all it takes is the addition of a bit of CSS code and uploading a web-acceptable font to your server, and the typography choices become endless. Take for example http://lostworldsfairs.com/eldorado/. All text on that site is actual text with CSS @font-face styling on it. It provides an incredible punch to the site’s design, allows it to be searched by crawlers, and best of all, it can be easily updated by merely changing the text instead of having to alter an image.
There is a small hiccup in what is considered ‘web acceptable’ now in the limitless amounts of fonts available. Is a font free to use? Is it licensed? How do you even know if a font is web-useable? There are large websites such as http://www.dafont.com, http://www.1001freefonts.com/, and http://www.fontspace.com/ that all have huge collections of fonts that are available for use. Most fonts on these sites are marked for what uses they are allowed – personal, commercial, free, licensed, etc. Using those guidelines, a vast array of fonts can be used depending on what type of site you have. When downloading a singular font, the .ttf, .woff, and .eot font extensions indicate web-usable fonts, and for best browser and platform compatibility, it is best to have all three versions marked in your site’s CSS file and available on your site’s server.
With this addition to CSS, the design possibilities are endless. Sites become more beautiful with their text providing information as well as design. If you would like to see additional sites with incredible typography, please visit any of the following:
http://lostworldsfairs.com/atlantis/
http://lostworldsfairs.com/moon/
Read more:
This article was written for Business 2 Community by Connor Brooke.
Learn how to publish your content on B2C
Join our Telegram channel to stay up to date on breaking news coverage
Add B2C to your Google News Feed
Love the article thanks for your time