10 Dos and Don’ts of Web Typography – Web typography has more to contribute to the effectiveness and reach of your design than you think. Having done everything in your knowledge to design a website, only to find the metrics staying stagnant, chances are, your web typography isn’t optimized.
The thing with typography is, that no matter how clearly you’ve written the words, if the font isn’t suitable, your message is lost. And no matter how powerful your web content is, if it is illegible, once again, the purpose is deceived.
Fonts are essentially the foundations of a great website design, which is why it is important to apply the psychology of typography when practicing good design ethics.
This is where DM360, as an experienced provider of web design services, shines! We have a knowledge-backed team of design experts who apply the science of design to create impactful websites.
Fortunately, there are a few rules you can follow to optimize your typography.
Here is an easy guide of 10 dos and don’ts to follow to achieve a clean design.
Do’s of Web Typography
These are 5 things you SHOULD DO for a great design.
Choose a Sensible Typeface
When choosing typefaces, apply logic and basic psychology to align them with the tone and mood of the message you need to deliver. There are different categories of fonts like serif, san-serif, script fonts, etc. each of which has multiple sub-sets with unique characteristics and aesthetics. Pick your typeface and font based on the tone they set. For example, there are soft tones, strong tones, comical tones, and so on. Based on your website and brand’s overall tone of voice, and of course, the tone of the message, choose a sensible typeface.
Choose the Right Font Combinations
Just as important as choosing a sensible typeface, is choosing the combination of fonts. You may have the best typeface and the best fonts chosen based on popularity, but if they don’t look good together, your entire web design will be affected. Most web design service experts stick to some classic font combinations, such as serif + san-serif, script + serif, or script + san+serif. These are clean, and safe combinations that balance out each other. The elegance of one can draw attention, while the cleanness of the other will deliver the message.
While choosing fonts, make sure to align the choices with the brand voice and persona as well.
Ensure Ample Contrast Between the Text and the Background
Contrast is a very important element in typography that affects readability. An optimized level of text-to-background contrast must be maintained in order for your text to be legible. A standard application method is dark text on a lighter background or light text over a dark background. Further optimization can be done with elements like tracking, font size, and measures. Stay away from using both colors from the same light or dark family.
Use an Optimized Body Copy Size
When choosing body copy size, remember that not everyone has 20-20 vision. A lot of website owners make the mistake of setting the body text too small, in order to keep up with the aesthetics of the design. However, this royally deceives the purpose of the text and doesn’t deliver the desired impact. You must set an optimal size for your text to be comfortably readable on any digital device. Ideally, it is advised not to choose anything below 14 points.
Be Mindful of Kerning and Tracking
Kerning, as we know, refers to the space between the letters in a word. Tracking is the space between all the letters and words in a group, which can be a line of text or a paragraph of text. According to the typefaces and fonts you decide to use, these spacing elements can vary, which is why you need to be mindful of them and optimize them. The idea is to keep the text legible and readable, even for someone with low vision.
The leading or the line height is another spacing element to be mindful of. It takes care of the spacing between the lines of text. Web design service experts usually have a knack for setting optimal spacing.
Don’ts of Web Typography
These are 5 things SHOULD NOT DO, for a great design.
Don’t use too many Fonts
When choosing typefaces and fonts, you may come across several styles that you find suitable for your website and tone of voice. Do not proceed to use all of them in a single project or website. This will make your website look cluttered and trashy. As mentioned before, fonts invoke emotion and set the mood. Using too many of them will just confuse the reader and cause them to leave.
Ideally, stick to two, or at best three fonts for a single project. One typeface for the header, and one for the body; perhaps one more for any other element or widget you wish to place.
Don’t use Fonts and Typefaces not Designed for Web Use
Web design service professionals know that there is a generally acceptable list of web-safe fonts to use for website design projects. Highly creative minds can expand their knowledge levels to explore and discover new and unique fonts to use. However, be mindful of the fonts and typefaces you select, as only certain subsets out of the plethora of fonts available in the world of web design are suitable for body copy and headers. Out of the few, even fewer are optimized for web use. Hence, always check the appearance and optimization qualities of fonts before you apply them to your project.
Don’t use all Capitals in a Continuous String of Text
Large chunks of text are generally discouraged for website use, for the simple reason that it is harder and less interesting to read. Worse is when the continuous string of text is in all caps. It is even harder to read, contrary to what people may think. Besides, all capital text is generally considered aggressive, or as undue yelling. For marketing or email copy, a chunk of text in capitals can also appear spammy. Hence, as a general rule of thumb, do not use capitals for continuous chunks of text.
Don’t Ignore Typographic Hierarchy
Maintaining typographic hierarchy helps give structure and finish to your website. It helps the user understand the navigation better and guides them through the content on a page. You can establish a hierarchy by organizing your text on the basis of size, color, contrast, etc. The intent is to allow the reader to scan the page easily and understand the content better. We all know that no one has the time to read long strings of text. Hence, web designers always need to make it easy for the reader to consume the content with less effort. Using different weights, colors, sizes, etc. will help do the same.
Don’t Center-Align Large Amounts of Text
Center-aligned text is always harder to read, as the starting point of each line is not the same. This makes it harder for the eyes to scan through and read continuously. Moreover, centrally aligned paragraphs of text are harder to align with the rest of the elements on the page. It leaves unused spaces and makes the page look odd and amateurish. Hence, it is always advised to use center-aligned text mindfully, and only where needed. The standard is usually left-alignment; but a combination of left and center alignments, where it makes sense, will also work fine.
Get the Best Results with DM360’s Web Design Services
Your website’s design is a crucial aspect that decides its effectiveness and reach. And typography is an integral part of the design that calls for the expertise of skilled and experienced professionals.
Use this as a mini-guide for your next web design project or call us for more expert advice, and high-level web design services.
For a more crucial typographic audit for your website, contact our team today.
Let’s optimize your website!
