Typography 101: What to Know When Designing Your Webpage
As every web designer knows, the typography on your website is one of the key make-or-break factors of your site. Visitors who come to your site can either be welcomed or be scared off by a font, so choosing the right one is essential. The right font can be the difference between a website that crashes and burns and a website that everybody loves. How do you know what to do and what not to do? Take a look at the list below.
DON’T use strange fonts!
As you are no doubt aware, you have thousands upon thousands of fonts at your disposal. However, you don’t need to use all of these. Fonts such as Times New Roman, Arial, Courier, Verdana, and Tahoma are examples of fonts that many people will be familiar with, which makes them great choices for a website. That sort of fonts is also good because they display reliably. Special fonts, on the other hand, may not display properly for all users, which makes them more unreliable.
DON’T use fancy fonts on large blocks of text!
You should be especially wary of using an extravagant font in large paragraphs or other blocks of text. Generally, these fonts are not as readable as standard ones, which can make them an annoyance for users. Forcing a user to read a large and difficult paragraph is a great way to make the user want to never use your site again.
DON’T use comic sans!
This font deserves a special shout out. Comic Sans used to be the “cool” way to let people know that your company wasn’t just any other boring company. The cartoon-like style of the letters made the font attractive to many people who were trying to show a lighter side to their site. However, as time passed, its message changed entirely. Comic Sans now screams out, “I’m Unprofessional”. Whatever you do, don’t use comic sans.
DO take care of kerning!
Take care of what? Kerning is the act of balancing the white space between your letters. This is super important! If it looks like you have extra white space that shouldn’t be there, then your site will look unprofessional. Take care of kerning and make sure that all of your typography looks good before you actually put it on your site. This means that the text should be “balanced” with other elements on the screen, and with itself. This may take some time to get used to, but is a valuable skill that makes your website look by a long shot better.
DO use hierarchy!
This article would be a lot harder to read if there weren’t bolded headings, don’t you agree? Don’t make your users try to guess what each paragraph on your site is about. Tell them! This will make the user feel a lot more comfortable and it will make the text a lot more readable. Remember: if your users can’t read your site, then you might as well not have a site. Ensure that every element of your site agrees with the overall hierarchy. The site, as well as the content on it, should make sense to anyone who comes across it. Having to search around to find basic information is a huge annoyance and can easily drive visitors away from your site.
DO use lorem ipsum text!
The Lorem ipsum text is commonly used as a placeholder while in the design phase. Here’s a sample paragraph:
The Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a neque orci. Suspendisse pharetra ultrices mauris, eu lobortis turpis tempus eget. Morbi sagittis lacus ut magna lobortis sollicitudin. Fusce commodo suscipit ipsum euismod posuere. Vivamus eget lectus odio, cursus iaculis tellus. Cras varius mattis mauris, nec ultricies nisl feugiat ac. Sed congue suscipit lacinia. Duis sapien nunc, sagittis sit amet consequat a, congue id urna. Morbi auctor libero lectus. Duis ut nunc leo, et cursus quam. Nunc at dui non enim facilisis vehicula vel at ligula. Etiam scelerisque porttitor risus ac luctus. In nec tortor enim, aliquam tincidunt lorem. Nulla facilisi.
Why on earth should you put this on your site? To test it! Before you spend a lot of time writing extensive pages for your site, you should make sure that they display how you want them to. The Lorem ipsum text is just the thing to do the job. With this text, it is easy to see how different elements, fonts and colors all work together to form an entire web page. If you like it, swap in real text. If you don’t like it, then you can go back to the drawing board without having to waste too much time.
And, finally…
DON’T be afraid to break these rules!
These rules are not at all cut in stone. If you have a great idea that you just know will work, then go for it! The only real rules are that your site should be clean, understandable, and professional. The DOs and DON’Ts above can greatly help with that. It is true that typography can break your site, but by following these simple guidelines, you ensure that typography will actually make your site.
ABOUT THE AUTHOR
