Most of the information you find on the internet are in the written form, and even after the popularity of the visual content (videos, images), textual content has its own significance. I am sure it will never lose its importance regardless of how technology will advance in the future.
According to ia.net, 95% of the total information on the internet is in the text form. Therefore, web designers must know the art to arranging and styling the written content to make them more readable and appealing. These include selecting font family, font size, font colour, line spacing, letter spacing etc. Technically this art of styling and arranging the written text is called Typography.
6 Rules for great typography
1. Use real Content while working on the web typography
The very first thing you should do is to dump the Lorel Ipsum [Dummy Text] text while working on the typography design. The reason I am keeping this rule because there is a huge difference in the dummy text and real content.
You may not experience the actual look of the content when you are having dummy text thus using real content should be preferred so that you can see what will display actually to the audience.
So you should ask your client to provide actual content before proceeding with typography design.
2. Take Care of Kerning
Kerning is the space between the pair of letters. Many newbie designers don’t care of kerning so much, but it’s an important thing to consider specifically in case of writing Headings.
All the letters must have a uniform space with their consecutive letters.
- Image credit: thedesigncubicle
When you use web fonts like Google fonts then the kerning issue gets more complicated but they are easy to fix. In the body copy where comparatively smaller font size is used, kerning issue doesn’t get visible but when you write bigger text like headings or sub-headings, kerning issue gets prominently visible and it spoils the whole aesthetic of the content.
3. Don’t Mix so many Typefaces and Weights
Never use so many typefaces and weights in a website copy. It is very distracting and the audience won’t like your site if you use so many styles. You should restrict to maximum 2 typefaces for a website project. When it comes to weight, don’t overdo it. Do it when it is required. Making the text bolder or italic come into use when you have to highlight something so that it could grab reader’s attention. However, use it if it’s really very important.
Therefore, always use one typeface for Page Titles and other for the body copy. It makes the content look professional and uniform.
4. Choosing the Typefaces
While selecting typefaces for your project, I would advise to use san serif for larger texts such as headlines or page titles, and use serif for the smaller text usually the body copy which is normally longer.
Serifs are well known to make the reading lengthy text material and thus they should be used for the text blocks which are lengthy.
I am taking an example of alistapart.com, in which you may notice that they use San Serif for headlines (bigger text) and serif for the content part which is comparatively lengthy and small.
This is the perfect balance of typefaces and not just me, but experts also suggest the use of Serifs and San Serifs in this way.
To make you understand what actually the Serif and San Serif (without Serif) are. Please look at the below screenshot:
– Image credit: gngcreative
5. Font Size Matters a lot
Font size matters a lot, you have to make sure that the font of the headings and body copy are of standard size. They should not either too big or too small. However, headings should be bigger as compared to body copy so that they can look distinguished.
Though bigger fonts are easier to read, smaller fonts look more professional. I recommend using font size in the range of 12-15px for body copy, as this size range is neither too big nor too small.
Sometimes different fonts may differ even you set same size for them so you should make sure that the font you are using looks professional at the specified size.
6. Avoid Using Center Alignment for Text
To be honest, I don’t like centered aligned text when it comes to lengthy content because it becomes hard to read the copy.
Look at the above screenshot, which one looks better to read? Of course the one which is left aligned. Therefore, get rid of center aligned text and use left alignment for the body copy. Even if you have a requirement of using center aligned, then try not to overdo it.
These are the 6 rules for great web typography that you should not ignore if you are working on a professional project.
10 Widely used fonts on the web
1. Open Sans
2. Josefin Slab
6. Abril fatface
8. PT Sans
9. Droid Sans
10. Old Standard TT
5 top web typography resources
As we are talking about Typography, I would like to share few of great resources for our lovely readers so that they can take reference from them whenever required. Below is the list:
5 inspirations for great typography
When it comes to design, every designer needs inspiration while working on various projects. Therefore, I have come up with 5 inspirations for great and beautiful typography.
1. Life Type
– Source: topdesignersgallery.com
2. A Tribute to Yulia Brodskaya
– Source: behance.net
3. The person you love is 72.8% water
– Source: typographyserved.com
4. Hip hop live by Pooshtioo
– Source: pooshtioo.deviantart.com
5. I’ve Got the Magic
– Source: behance.net
Typography is one of the most important parts of the web design. As textual content is the prominent part of almost every web page, it should be arranged and styled in a better way to make it look beautiful and professional.
I am sure this guide will help you get started with Typography. Share your views in comments. If you have any question, then also let us know, we will try to answer them as well.
That’s all for now!
Featured image credit: digitaltutors.com