Web typography refers to the fonts incorporated in web pages. It is a critical aspect of website design because it has a direct impact on readability of the site. Many people think that responsibilities of a affordable website design professional do not include paying attention to web typography. However, this is a wrong concept.
Apart from investing time for creating designs, one should also be attentive towards web typography. Remember that if your web typography is poor, visitors will not bother to observe your designs. We provide you with few tips that will help you to deal with web typography in a hassle-free manner.
- Use Three Typefaces per Design
Using three typefaces (at the most) will allow readers to observe your website clearly. Arranging content with various typefaces can create a messed up look of the site. Additionally, it may convince visitors that various parts of the content, such as different paragraphs are unrelated.
Of course, while reading, visitors may not be able to pick out the exact source of discomfort. Still, they will not be comfortable in reading information that contains various typefaces.
- Distinguish the Headline
Title of an article draws attraction of visitors initially. If they find the title catchy, they will move on to rest of the article. This means that you have to highlight the title, so that it grabs attention of the readers at any cost. Increasing size of the headline is the easiest way to highlight it.
- Set Size of the Body Copy at 14 Pixels
For best results, try to make sure that visitors can read your body copy comfortably. It is true that apart from size, other factors can also influence readability of the website. Still, size is the most important determining factor. Setting size of your body copy at 14 pixels can be a great idea.
- Avoid using Underlines and Italics Unnecessarily
Do not confuse your readers by using italics and underlines unnecessarily. Italics and underlines attach greater importance to a line. If you use italics and underlines in every sentence, your visitors may feel confused.
Rather, use underlies and italics, only when necessary.
- Do not Use Full Capitals for Large Blocks of Text
Using full capitals for huge blocks of text is a bad idea. This is because of the fact that as compared to text written in lower and upper cases, information set only in capitals are harder to interpret.
If you set information lower and upper cases, as required, it will be comparatively easier on the eyes. Furthermore, it will allow visitors to interpret information more easily.
- Avoid Cramming Large Information in a Limited Space
To increase readability of your site, do not force huge information to fit into a limited space. Rather, provide it with enough space, so that it assumes a neat look. At the same time, do not incorporate excessive space, so that the whole text appears disjointed and unrelated.
- Pay attention to Background Contrast
You may have opted for a larger font size for increasing readability of the text. However, if the contrast between information and its background is poor, it will hamper readability and legibility of the site. Common practice is to place light text against a dark background or vice-versa. Avoid using clashing colors at any cost.
- Opt for Fonts that are perfect for Screen Use
You can avail various types of fonts in the Internet. Unfortunately, many of these fonts are not fit for using in websites. For this reason, carefully selecting the fonts is important. Additionally, you can take help of hinting tables and check appearance of fonts at smaller sizes on various browsers.
- Avoid Using Comic Sans
Comic sans has become a much hated font and we are no exception. We strongly believe that using this font provides your site with a childish and immature appeal, which majority of visitors will not appreciate. Try to avoid it.
Enjoy creating an accessible website!
What people are saying
Thanks for sharing excellent guide. I wish every designer should understand the importance of typography. Improper typography could also be a mistake of the failure of a website design. I would like to put typography at first priority when it comes to design a website and save web design from being a failure. The advice you have given here is really fantastic and contains many useful information.
Thanks for sharing. Surely a lot of people will be benefited with this points.
Very useful. I’m looking at a re-design of one of our websites right now and realised that we were using about 5-6 different fonts on the old site which just doesn’t look great.
I agreed to you that web typography is a critical aspect of web design and every designer should keep this aspect in their mind while designing the website.
All I can say is wow. I know that font styles and font sized matter but never knew so much detail about why they matter. Forwarding this to design team and thanks for the awesome article.
Putting clear, readable and effective typography in your website increases not only your visitors, but it also increases professionalism.
Set Size of the Body Copy at 14 Pixels? Isnt it better we should use 16-18px or better we go for 150%.
It depends, just change and check if it looks nice and readable or not.
Yeah I agree with you Diane, web typography is must required. keeping typography in mind i had designed my site.
font-family: ‘franklin_gothic_medium_condRg’; font is being used by myself on my various websites. and Body Font size kept .9em. and on some websites 1em.
H1 = 3em
H2 = 2.5em
H3 = 2em
H4 = 1.6em
H5 = 1.2em
Yeah I agree with you Diane, web typography is must required. Keeping typography in mind I had designed my site.
Very useful. I’m looking at a re-design of one of our websites right now and realized that we were using about 5-6 different fonts on the old site which just doesn’t look great.
Thanks, Admin. Very use full blog. Thanks for the post because this post is useful for me.