Web design typography is big thing! Lately I’ve been exploring typography and its influence in web design. First we are past 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 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 any more. Not just because of speed, but also from SEO point of view.

How to use Google webfonts on a website

These examples use Google webfonts 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 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

@import url(http://fonts.googleapis.com/css?family=Lobster);

3. JavaScript for asynchronous loading

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Lobster::latin' ] }
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

After you done of the 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.

Leave a Reply

Your email address will not be published.