Before we go over the practical application of Internet typography principles to your website, let's briefly explain what typography is. By definition, typography is a set of rules regarding the visual aspects. It is a term used in both traditional and digital printing. Internet typography is crucial when writing articles for a blog, creating content for websites, and any graphic work, e.g., logo design.
What are the characteristics of fonts? How can you recognize serifs? You must know such concepts! Whether you are a blogger, web design enthusiast, or simply want to improve your website’s content, it's worth getting acquainted with the basic terms before you start exploring the ins and outs of web typography.
A typeface is a set of characters with consistent graphic features, e.g., shape, style, and proportions. Many people confuse a typeface with a font or a font. When we mean changing the font (Times New Roman, Arial, etc.), we refer to the typeface. Typefaces can be divided into categories, taking into account the script’s different characteristics. The best-known types of the typeface are: is a set of characters with consistent graphic features, e.g., shape, style, and proportions. Many people confuse a typeface with a font or a font. When we mean changing the font (Times New Roman, Arial, etc.), we refer to the typeface. Typefaces can be divided into categories, taking into account the script’s different characteristics. The best-known types of the typeface are:
- serif typeface (so-called serifs) - letters have flattened endings (e.g., Times New Roman)
- sans-serif typeface - simple letters without endings (e.g., Arial)
Leading, tracking, and kerning are ways of regulating the light (or distance) between letters. These are popular functions found in many graphics programs designed to work with text. What is the main difference between these three methods?
Leading refers to regulating the distance between the writing lines where the letters stand.
Tracking (also known as changing the composition density) can be applied to a larger text area, e.g., the entire paragraph.
On the other hand - kerning is used selectively in the text.
For example, it can be used between similar letters V and A to make it easier to read. Moreover, kerning determines the spacing not only between individual letters but also between punctuation marks and numbers.
Orphan is colloquial term for simply conjunctions that hang, that is, left at the end of a verse. If we put a single letter word at the end of a line, it is a composition error. Therefore, the conjunctions left at the end of the line should always be moved to the next line. Sometimes, if there are few hanging conjunctions in the text, it is worth moving them manually. However, most graphics programs offer faster options for solving this problem. It's a good idea to read them if you are dealing with text that contains many of these types of errors.
We've already said what typography is - now it's time to explain its meaning in web design. The role of typography is not limited to the decorative function. In the online world, its main task is to make it easier for users to perceive messages from websites. Most Internet users do not read the texts word for word but only scan the content, selecting the most important fragments. Therefore, the entire typography of the page should be designed thoughtfully. After all, your goal is to draw the reader's attention to the most important information you want to convey. It cannot be denied that well-chosen fonts can liven up your website and give it the right character and hurt the reception of the entire website. By following the typography rules, you can be sure that your website’s content will be aesthetic, legible, and consistent with its style.
You can have the most beautiful designed design on the page. But if you don't choose the right font for it, there will be no WOW effect. If you doubt whether the fonts’ size on your site matters, imagine a situation where a user enters an outdated page full of unreadable text strings. What happens if the structure of the content on the website does not facilitate or even makes it difficult for the user to find the most critical information? Indeed, it will quickly leave such an unsightly page and go to the competition, even if the text itself carries a substantive value.
The text on the website affects how your brand will be visually perceived on the Internet. Branding consists of name, logo, brand colors, and typography. So an adequately constructed font can become the hallmark of your brand. Therefore, if you want to create a strong and recognizable brand, treat typography as a showcase of your website! Advice? When creating a website, do not forget to discuss the typography’s consistency with the graphic designer with your brand’s visual identification.
Typographic negligence effectively discourages users from returning to the site.
Some typographic basics should not be broken, and that even graphic designers sometimes forget in a hurry. Ignoring them may disturb or even completely prevent the content’s message’s legibility. Here are the most blatant typographic oversights that are better avoided as they can ruin the UX of any page design:
Even if you think a small font looks nice and matches the page’s style, remember not to overdo it. Too small a font is always tricky to read. And it is the legibility of the text that you should put first if you want to create a user-friendly website!
Any negligence regarding the text structure will make your website perceived as chaotic. However, many graphic designers and web designers often make mistakes regarding their text structure. If you are dealing with a page with too long text strings, it is difficult to catch the most crucial information. Even if you feel like you have a lot of forwarding information on your site, remember that users prefer short texts! What if the reader deals with text that is too wide, taking up most of the monitor screen? To read the text thoroughly, the user must move his head from left to right and strain the eye movement. So if you want your readers to be user-friendly, it's worth preventing it! All you need to do is shorten the texts and follow the optimal number of characters in a line, i.e., between 40 and 80.
Content without paragraphs will look like an unorganized or illogical train of thought rather than a professional and substantive text. Of course, we don't want such an effect on the website!
It is another example of a text's lack of organization. Like a detail, it can completely blur the content’s message or testify to a lack of ingenuity.
According to the rule, the less is more, maximum of two different fonts. Please familiarize yourself with the common standards for combining fonts before you make your choice. You can always choose the most popular combinations. The most straightforward fonts are all sans-serif (Arial, Calibri, Lato). You can combine them with fashionable Easter typefaces, i.e., fonts with distinctive ornaments.
You already know what orphans are and that you should not leave lonely conjunctions at the end of a poem. Even if it is not a glaring error at first glance, it is worth avoiding. Then the text is much easier to read.
You've undoubtedly seen a website more than once where the text is illegible due to patterned backgrounds. Putting text on a photo, or even a distinctive color, is always a risky procedure. Avoid any text background patterns if you don't want to tire the user's eyes.
Justifying text will make your text look unnatural. Therefore, it is worth avoiding this treatment. Instead of giving the impression of organization and elegance, the text will simply become unreadable. Justification only looks good in newspaper columns. On the Internet, this results in the formation of white spaces in the text, in other words, gaps. What then instead of justification? It is better to focus on the text’s alignment to the left, the so-called flag arrangement.
If you are not convinced that your website’s text is reading well, ask your friends to test. If they squint their eyes and move closer to the monitor to read the text, it's a sign that something needs to be changed!