Web Design Typography


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

@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') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>

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.

Share This Post

Picture of Roni Marinkovic

Roni Marinkovic

Codeable Expert WordPress developer with a passion for optimizing WordPress websites. Spending time creating functional, high-performing WordPress websites for 15 years and websites for 24 years! I'm either windsurfing, scuba diving, hiking, or riding a motorbike when not working.

More To Explore

Core Web Vitals - Lighthouse Scoring Calculator
Website Speed

Core Web Vitals explained

Core Web Vitals are part of Google’s Web Vital measurements using the Lighthouse tool, and they apply to all pages. The current CWV relevant measurements

Do You Want To Boost Your Business?

drop me a line and keep in touch

Contact Roni