Web design typography. This is what you need to know to create websites
By Karol Andruszków
February 10, 2021
Typography is of great importance today in designing websites and web applications. We have prepared a short guide to web design typography’s most critical elements. Find out which typography rules are the most important and what typographic mistakes are better not to be committed!
However, learning typography does not have to be boring and take years! If you become familiar with its most essential principles, you will design the appearance of texts on websites following graphic standards. What secrets of good web design will ensure that your website’s text is legible? At BOWWE, we have prepared a short guide to introduce you to typography basics. You will also learn what typographic mistakes avoid disturbing the text’s readability on the page. Here are some practical typo tips for applying to any website.
What is typography?
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.
Typographic terms, which you MUST know!
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.
Typeface
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.
Serif and sans serif fonts
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)
What do leading, tracking, and kerning mean?
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.
- 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.
The Role of Typography in Web Design
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.
.jpg)
How important is the appearance of the text on the page?
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.
Ready to create your website?
Use the most convenient website builder, trusted by thousands of designers and create websites that will provide you with customers!
Start now!
Typography influences branding. Branding influences typography.
.jpg)
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.
Common typographical errors
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:Font too small
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!
Too broad and too long blocks of text
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.
No paragraphs
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!
No headings in the article
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.
Wrong choice of typeface
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.
Leaving conjunctions (orphans)
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.
Background patterns
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
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!
Where to find typography knowledge?
.jpg)
Here are a few must-haves for every UX designer, web design enthusiast, and anyone who wants to explore the secrets of Internet typography.
- First Aid in Typography (Friedrich Frossman, Hans Peter Willberg) - a typographic toolkit that will help many novice designers in need.
- Shady Characters (Keith Houston) - some knowledge about the history of typography and practical descriptions of typographic characters.
- The Elements of Typographic Style (Robert Bringhurst) - a must-read for typographers and more. You will find some theory and knowledge on building whole typographic arrangements.
For attractive inspirations on the Internet, you will find trends and typographic curiosities worth taking a look at the fanpage Fontfabric Type Foundry. You can also follow the work of modern typographers as an inspiration. Łukasz Dziedzic is a Polish designer who created the Summer cut, and on his website regularly publishes news from the world of design.
Create the perfect typography system for your website
.jpg)
Typographic rules used when designing websites are not very complicated, and knowledge of them may turn out to be irreplaceable. Even without advanced graphic knowledge or coding skills, you can try to ensure the basics of typography on your website. And if you want to learn how to design readable text for a website, read our article and learn about every UX designer’s seven golden rules!
Karol is a serial entrepreneur and founder of 3 startups, as part of which he has advised several hundred companies. He was also responsible for projects of the largest financial institutions in Europe, worth over EUR 50 million. He has two master's degrees, one in computer science and the other in management, obtained during his studies in Poland and Portugal. He gained experience in Silicon Valley and while running companies in many countries, including Poland, Portugal, the United States, and Great Britain. For over ten years, he has been helping startups, financial institutions, small and medium-sized enterprises to improve their functioning through digitization.
![How Did BOWWE Become the Best Creator on AppSumo? [Case Study]](/upload/domain/4645/thumbnails/040_AppsumoCaseStudy/BOWWE_Campaign-ArticleCoverx300.jpeg)
![Create a Website From Scratch by Yourself! [Full Guide]](/upload/domain/4645/thumbnails/039_HowToCreateAWebsite/Title_Image_HowToCreateAwebsitex300.webp)
