Responsive web design is now mandatory if you want your website to get a good ranking on Google & Co. By the "Mobile-first indexing“ from Google, to which Google will switch from 2021 Websites without a mobile-friendly design will be penalized and therefore fall in the ranking. Just the typography is important so that the content can also be read well on any end device.

Responsive web design – the most important things in brief

• Before designing the website, typography plays an important role and should be carefully considered.
• On the one hand, the typography ensures good readability and thus a positive user experience, on the other hand, the typography is also relevant for search engine optimization.
• In the future, Google will even penalize websites without good mobile design - and that is why the choice of font, font size and formatting of the headings are very relevant.

What is typography?

Typography denotes the The art and teaching of writing and the distribution of text and images (here: on the website). There are often websites that do not have a suitable font, shape or size and are therefore difficult to read. This is not only very exhausting for healthy people. Disabled people in particular find it difficult to use such websites because the writing is barely or not legible.

The right typography is just as important as the content itself. Because even if the content is very good, users will bounce if the text is unreadable. To keep them on your page, make sure you use good typography.

Good web designers take on the topic at an early stage in the project, because that Screen design also depends on typography. There are certain typography basics that should always be followed, but you can vary the typography depending on your audience.

A Brief History of Web Typography

At the beginning there is often a question for the correct font - and there is already one big decision. Blogs and small websites often use freely available non-copyright fonts, which is a good idea to begin with. These fonts are usually already established in web design. An example is the “Roboto” font that Google invented for its Android operating system. She can up read well on all end devices and in all sizes. "Roboto" has clear lines, no frills and has been in use for a long time, which means that problems and bugs have already been identified and fixed. With the correct ones Line spacing set in the theme, you have a very good basis for the acceptance of the site by your visitors. Total offers Google Fonts on the website a large selection of fonts that can be found in a well-arranged catalog.

Before Google Fonts existed, web designers often found it difficult to find a suitable font and integrate it correctly into the website. Initially, browsers only understood system fonts, which is why other fonts could not be displayed correctly on most computers. Despite the variety of fonts provided by Google Fonts, all are easy to read. They are structured and beautifully designed to be readable on tablets and smartphones as well as large computer screens. For that they have to be responsive.

Web typography rules explained

When it comes to web typography, there is one clear structure of the text content important. SEO aspects also play a role. There can only be one

heading per page, followed by a

heading, followed by

or

headings.

punished however, an order like

,

,

, even if they are separated in the design so that

headings look more prominent. As a rule, no web designer will structure a page in this way, because the sequences are obligatory.

highlights

The authors also have to abide by certain rules. So can though important parts of the sentence are highlighted become, but the highlights shouldn'tt too different be. On the one hand, it is difficult to read, and on the other hand, too much highlighted text is more of a hindrance for a good SEO ranking.

paragraphs and subheadings

Enough paragraphs as well meaningful subheadings, are important to make the text easier and more enjoyable to read. In the case of very long texts, you should insert a table of contents at the beginning in which the topics of the text are listed. Clickable anchors are useful because they allow the visitor to jump directly to the right topic without reading the rest of the text, which may not be of interest to them. Plus, visitors can come back later and continue reading where they left off.

Contrast between text and background

Text and background must be high-contrast. That's how it is text easier to read. If the contrast is too low, search engines could also penalize the page on suspicion of fraud. In the past, resourceful authors exploited a gap in Google to rank a page for certain keywords that didn't fit into the actual text. They wrote passages of text in white type on a white background and placed them next to or below the actual text.

The reader doesn't notice it at first, except that there is unusually large clearance at the sides or under the item. During the crawl, Google discovered the text, including keywords that ranked well, and the pages ranked for keywords that actually didn't fit the topic. Google now recognizes these attempts interprets them as cheating and penalizes the page with a lower ranking.

There are numerous browser-based color tools and information pages on the subject of color and contrast, which we will present to you in this article.

Tips for responsive web design – conclusion

Good typography is relevant online for a number of reasons. It is the basis for good readability for humans and (search) engines, on the one hand related to the content and on the other hand to the presentation. So if you pay attention to good typography, your pages will be found better in search engines. In addition, the bounce rate is reduced because users can easily process the typeface of your page.

What are design systems and how do you work with them? Learn more!

Title motif: by Gerd Altmann on Pixabay