Selasa, 22 September 2015

Using fonts in web design

An important part of the design is typography.
In print design, as long as we have the rights to use a font, we can pretty much do what we want. Of course, designers stick with some golden rules : don’t use too many fonts in one page, make sure it’s readable, make it big enough, but not too big, use colours and style wisely, etc, etc…
But in web design, not only we have to follow the same general design rules, but we also have to make sure fonts we use will be correctly displayed for all or most of our visitors.
There is a very short list of web safe fonts we can use for sure. CSS Font Stack is a great website extending this list of basic web fonts and providing statistics about availability of those fonts depending on operating system.
We also have access of many other fonts by using external services such as Google Fonts, TypeKit or Font Squirel to name a few. But this has its drawbacks. Even when the service is free, the use of these fonts can increase the page loading time (i.e. slow down your website).
Depending on what type of web page you’re building, it can be better to stick with default fonts. Choose your favorite, then make a list of fonts that look similar, in case the one you prefer is not available. Typically, if we go for Helvetica (widely available across Mac computers, not so much on Windows), we will give Arial as a second choice (which is available on all Windows computers). The page will look slightly different depending on the device and operating system you use, but it will be close enough and the pages will keep loading fast.
Talking about devices and operating system, here’s another annoying thing you should know : even if we use the same font and make sure it is available widely, there’s no way it will look exactly the same everywhere. Some computers will make it look bigger, or use different space between letters (kerning and/or tracking). So when building a website, you need to accept the fact that it will never be exactly the same. Your web designer / developer also needs to be aware of that to make sure it will look close enough and always usable and readable on all devices.


Tidak ada komentar:

Posting Komentar