Typography though can be called as an old idea but using it over the web platform is something new. The designers generally have one common and important task to accomplish – to properly carry out the setting type. By honoring the text you can take care of setting types but at the same time legibility and readability factors too have to be considered. Also, you need to render visual cues which showcase connections between and amongst the text. Since the web typography ideas were introduced just few years before, hence many designers seem to lag behind these ideas. The below is the list of ten ultimate steps which you need to follow to hit the bull’s eye.
Restrict the typefaces per design or page up to three
Designers abide by this basic rule of setting the typefaces, wherein they simply use it more than three typefaces per design. You can create the disunity setting by applying and setting text with large amount typefaces types. With this, the readers get the idea that the texts with diverse typefaces are not related mutually. This rule gives the designers to render artistic freedom making things better for the users.
Put headings invitingly and in large fonts at the top
Headings are considered to be the first things which are seen and read by different users visiting your website. These play a good role in demarcating sections in passage. The best way to deal with the headings is to put them over the top using proper font size and style which has the ability to attract your visitors’ attention.
Keep the body copy size 14 pixels+
This is considered to be the most important thumb rule. You are supposed to give body copy the right size it requires to be conveniently read over the screen. Though there are other factors too which play a role in influencing the text readability and legibility, however, the size of the text is considered to be the most critical one. Therefore you are supposed to select a size of body copy which can prove legible over the screen. The perfect body copy size comes out to be 14 pixels.
Ensure proper text to background contrast
By having a poor contrast between the background and text can weaken the legibility factor. A right way of doing things is to place dark color text on lighter backgrounds or vice versa. It is strongly recommended to avoid using clashing colors or some scarcely visible grey fonts over a white background. You are supposed to be careful while using light color text over the dark background since it hardly has the same contract as they are simply cousin opposite.
Apply emphasis and stress discreetly
This is a blend of editorial and typographic principle where you are supposed to avoid littering text with extra usage of underlines, italics and bold faces. Rather, they are recommended to be used sparingly only for the purpose of intentional emphasis. Also, you need to avoid things like long underlined hyperlinks particularly in the cases of smaller or serified typefaces.
Avoid setting continuous kind of text in upper case
Text set in upper case or lower case is considered to be more legible and recognizable than the ones which are set completely in uppercase. The consistent baseline and the set words height in all capital letters diminish the legibility to a huge extent. Even if you are interested in setting a long string of text in uppercase, you are required to set them in small capitals with adequate leading.
Give the text a space to breathe and set sufficient measures and leading
This is considered to be among the important rules on web typography. You are supposed to provide sufficient space to the text to breathe both horizontally and vertically. This will give crisp, good contrast readability and legibility. Also, you need to take care about the lines; these shouldn’t be too long or too short. Also, the length of the lines should incorporate enough space between the lines.
Avoid using fonts not fit for web platforms
Of all the wide range of available fonts, only a small section of subset is suited the best for the web platform use. While using the smaller size fonts (10-12px) in your web design, it is important to test them on a wide range of operating systems and browsers to check their legibility and readability.
Cache the webfont assets
By using the webfont assets you simply increase the page size as the browser downloads the required font for the text. You can think of reducing the load size by eliminating the unnecessary glyphs for characters.
Avoid using Comic Sans
There is no point in using and overusing unattractive typefaces like Comic Sans when you have so many attractive options. Rather you can therefore use any appropriate comic typefaces including Comic Jens.
During setting type, the legibility of the text should be considered as the prime thing. Also, you are supposed to add visual hints to showcase the relationships amongst the text. For this the above ten tips or steps can help you in enhancing the overall web typography.