Web design typography is a big thing! Lately, I’ve been exploring typography and its influence on web design. First, we are past the default 12-pixel font size and 10-pixel padding. Nowadays it is recommended to start with 16 pixels fonts and at least 26-pixel padding to allow a clean layout and enough white space. Days of standard fonts are long gone, and custom web fonts arrived ages ago. Why talk about it right now? Well, I just started getting more into typography lately and it is just more on my mind. using custom web fonts can change the look of the website dramatically without the need of using images. We all know (at least should know) that site speed is really important. Using images where we can just use CSS and custom fonts does not make sense anymore. Not just because of speed, but also from an SEO point of view.
How to use Google web fonts on a website
These examples use Google web fonts API, the obvious advantage is that anyone can use them, they are hosted by Google thus available to everyone and their use is cross-browser compatible. To use them on your site you have three options:
1. Standard HTML meta tag to put in the head of your HTML documents
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
2. CSS @import to put in your style.css file
After you have done with the three methods above, you use the font in CSS like you would normally use any standard font.
font-family: 'Lobster', cursive;
So what do you say about it?
I’m really into web design typography lately, how about you? What are your thoughts on it? Do you already use custom fonts for web design, or you still hang on to images.