10 Tips On Typography In Web Design
While it is important to create designs that will appear more aesthetically pleasing to readers, the real purpose of typography in web design is to better communicate what the website wants to convey to its readers. The type of design you choose for your web can be an identifier of your branding.
For example, choosing a somewhat quirky design for your website will tell your prospective readers that your website is fun, interesting or even interactive. A more straightforward and serious design will tell your readers that your website means business. Basically, what I am trying to say is, the designs that you choose for your website is a reflection of your content and its content creator; it is a reflection of your brand. This gives a head start to readers on what they are about to engulf upon. This is where typography comes in handy.
Here are 10 tips to effectively improve the readability and appearance of your text content and to communicate with your readers in style.
DON’T USE WAY TOO MANY FONTS
While style is an important factor in designing, and while it is very tempting to use as much styles as you can, it is not a great idea to use 3, 4, 5 or above different fonts. Sticking to one or two is enough; as a matter of fact two is already plenty. Remember that you want your website to be clean and you want to it look fun while retaining its professionalism and structure. Rule of thumb: LESS IS ALWAYS MORE.
TRY STICKING TO STANDARD FONTS
Choosing standard fonts guarantees better readability on the part of the users because, generally, users are accustomed to system fonts such as Arial, Calibri, Trebuchet etc. Not unless if your website requires a specific or custom design, it is best to stick with fonts that people will surely understand.
LIMIT YOUR LINE LENGTH
The key to a perfect website is readability and legibility. Come to think of this simple rationale, if your text appears too wide, readers would not want to finish the whole thing. Your line length shouldn’t be too narrow, nor too wide, it just has to be the right length. Suggested by baymard institute it should be:
“You should have around 60 characters per line if you want a good reading experience. Having the right amount of characters on each line is key to the readability of your text.”CHOOSE A TYPEFACE THAT YOU KNOW WILL WORK WELL ON VARIOUS SIZES
Take this in consideration: Users will use different gadgets, thus there isn’t a single uniform resolution or screen sizes. Just make sure that you would apply a typeface that will work universally on different mediums.
USE FONTS ARE THAT EASY TO DISTINGUISH LETTERS
To avoid your users to mistake ‘i’ from “l”, etc. which happens most of the times, use a particular font that is distinguishable so that it is more readable and convenient for the users.
AVOID USING ALL CAPITAL LETTERS
Capitalizing letters should only be used to put emphasis on a particular word or sentence; it is not advisable to capitalize your entire content’s text.
DON’T MINIMIZE SPACING BETWEEN LINES
This refers to leading, which is what we call it in typography. Now, if you increase the lead, you are increasing or widening the white space in between lines of the text. By doing so, you are also increasing the readability of the text. Don’t do the other way around.
MAKE SURE YOUR COLOR CONTRAST IS SPOT ON
Colors also play a vital role in typography or in design in general. The most important thing is to consider the readability of your text, which is why it is nothing but useless to use the same font color as your background. The W3C recommends the following contrast ratios for body text and image text:
*Small text should have a contrast ratio of at least 4.5:1 against its background.
*Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.AVOID COLORING TEXT IN RED OR GREEN
We are familiar of the condition “COLOR BLINDNESS”, Color blindness is a common condition, especially amongst men (8% of men are color blind), it’s recommended to use other cues in addition to color to distinguish important information. We should avoid using red or green because these are the common colors that affect those that are color blind.
AVOID USING BLINKING TEXTS
Sometimes, flashing or blinking texts may cause other people’s seizures. Some people find it annoying and distracting which is why it is best to just stay away from it.
