Bad typography spoils every website. A solid guide on how to get it right

Typography is the foundation of every website. It influences readability, the feeling of visiting the site and how users perceive your brand. And yet it's the thing that gets the least attention when designing a website. This guide will show you how to take a systematic approach to typography - from font selection to proper text size to the English typography rules.

How to choose the right font for the web

Choosing a font for the web is one of the most important typographic decisions. There is no universally correct answer, but there are clear rules to help you decide.

Footer vs. nonfooter fonts

Sans-serif fonts such as Inter, Poppins or DM Sans dominate the web. They are clean, easy to read on screens and work in small and large sizes. On the other hand, footer fonts (serif) like Playfair Display or Lora add character and elegance - especially suited for headlines, editorial or more upscale branding.

On the web, you'll most often see a combination: a sans serif for the body of the text and either a footer or a bold sans serif for the headings.

How to combine fonts on the web

The golden rule for combining fonts is simple: use no more than two fonts on a single website. Multiple fonts create visual chaos and slow down page loading.

Functional combinations include:

• bold footer font for headings ﹢ neutral sans footer font for text,

• geometric sans footer for headings ﹢ humanist sans footer for text,

• one universal font (e.g. Inter) in multiple cuts - light, regular, semibold, bold.

If you are unsure, one well-equipped font with a sufficient set of cuts is the safest choice.

Where to find fonts for the web

Google Fonts offers hundreds of quality fonts for free and are optimized for web use. Adobe Fonts are available with a Creative Cloud subscription. If you want to have really polished typography, it's worth considering paid fonts from Briefcase Type Foundry, Displaay and other quality typefoundries, for example - they'll bring uniqueness to your brand.

At solidpixels, dozens of curated fonts from Google Fonts are included on every website, providing a wide range of typographic options for different projects. For ambassadors, it offers the added benefit of being able to insert their own fonts, allowing them to customize the look and feel of their sites to their exact needs and tastes.

When choosing a font, always check if it contains Czech accents (ě, š, č, ř, ž, ý, á, í, é, ů, ú). With Google Fonts, you can find out by filtering by Czech.

What to look out for when choosing a font for the web

• Readability at small sizes: open the font at 16 px and read a paragraph of text. Is it comfortably legible?

• Height x-height: fonts with larger lowercase heights are more legible in the body of the text.

• English diacritic support: always make sure the font contains all the necessary characters.

• Licence: check that you are allowed to use the font on the web and possibly in commercial projects.

Text size and typographic range

Correct font sizes on the web are not an accident - they come from the system. A well-set typographic range creates a clear hierarchy of information and makes it easier for users to navigate the site.

What should be the size of text on a website?

The default body text size on a website should be at least 16px. This is the standard today and is based on the average reading distance from the screen. For content-intensive sites (blogs, documentation, educational platforms) it is advisable to increase the base size to 18 px or even 20 px - the text reads better when working longer.

Usefonts smaller than 16 px only for additional information: image captions, footnotes, metadata. Never for the main content.

Typographic range for headings

Headings should visually stand out from the text and clearly signal hierarchy. A good working range of heading sizes for desktop:

This is not a dogma - it is important that each level of the hierarchy is clearly distinguishable from the others. If H1 and H2 are similarly sized, the meaning of the hierarchy is lost.

Modular typographic scale

A professional approach is to use a modular scale - each level is a multiple of the previous one in a set ratio. Popular ratios are 1.25 (major third), 1.333 (perfect fourth), or 1.5 (perfect fifth). If you have a base text of 18 px and use a ratio of 1.333, you get a scale of: 18 / 24 / 32 / 42 / 56 px. The result is a harmonic series that looks natural and consistent.

Line-height and line length

The two most often underestimated features of typography on the web. Yet they have a major impact on the reading experience.

What should be the line-height of text on the web?

Line-height determines the distance between lines of text. For the body of the text, the ideal value is 1.5 to 1.7 times the font size. Specifically: with 18px of text, set the line-height to 1.6 - this corresponds to 28.8px of line spacing.

Different rules apply for headings: large fonts naturally have large spaces, so reduce the line spacing. For H1 at 80 px, a line-height of 1.0 to 1.1 is appropriate. Too much line-height for headings creates airy blocks that don't visually connect.

Optimal line length for readability

The optimal line length for comfortable reading is 60 to 80 characters, or approximately 45 to 75 words per line. Shorter lines force the eye to skip too often, longer lines cause loss of orientation when moving to a new line.

In practice, this means limiting the maximum width of text blocks (max-width) to approximately 680-760 px with a base size of 18 px. On full-width layouts, it is common to limit the text column even in the middle of the page.

Character spacing (letter-spacing)

Character spacing or letter-spacing (tracking) adjusts the distance between letters. For body text, we recommend leaving the default value or a very fine adjustment (0 to 0.2 px). For large-size headings, a slight tightening (negative tracking, e.g. -0.5 px) can improve compactness and expression. In contrast, a slight loosening (0.5 to 2 px) for versal headings improves readability.

Typography on mobile devices

Mobile typography is not just a smaller version of desktop typography. Smaller screens have different reading conditions and require specific rules.

Font size on mobile

Basic text should be no smaller than 16 px on mobile - this is the minimum set by the accessibility guidelines (WCAG) as well. Browsers on iOS automatically enlarge text smaller than 16 px, which can break your layout. Many sites work on mobile with 16 px text and headings scaled to 60-70% of desktop values.

Headings on mobile devices

Large desktop scale headings simply don't work on mobile. An 80px H1 on a phone takes up the entire screen and shrinks to two words. That's why it's essential to define the typography for each breakpoint separately. A typical mobile H1 is between 36 and 48 px.

Line length and margins on mobile

On a mobile screen, line length is naturally shortened. With a width of 390 px and margins of 24 px, this leaves approximately 342 px for text - this equates to roughly 40-50 characters per line at 16 px. This value is still within an acceptable range. Do not reduce margins in order to fit more text on a line - this will degrade readability, not improve it.

Touch targets and spacing between elements

On mobile, you also need to think about sufficient spacing around clickable elements. Buttons and links should be a minimum of 44 px (Apple recommendation) or 48 px (Google recommendation). Densely stacked text links can lead to misclicks.

Testing typography on a real device

Always test typography directly on your phone, not just in a browser simulator. Real-world conditions - sunlight, holding distance, movement - can reveal issues you can't see in DevTools. Pay special attention to the contrast of the text against the background.

Czech typographic rules

A website written in Czech should follow Czech typographic rules. It's not a formality - properly typeset text looks professional and increases credibility.

Indivisible space - the most frequently violated rule

In Czech, you must not leave a single-letter preposition or conjunction (k, s, v, z, a, i, o, u) at the end of a line. The solution is a non-breaking space, which holds the word together with the following word.

How to insert a non-breaking space in solidpixels:

• Windows: alt ﹢space

• macOS: ⌥ ( option) ﹢ space

The indivisible space is also used after numbers with units (100 km, 50 Kč, 18 px), after abbreviations (Ing. Novák, Mr. Dvořák) and in dates (1 January 2024).

Czech quotation marks

Czech quotation marks are used in the Czech language in the form "bottom-up". Not the English "straight quotes" or the French guillemets.

• Correct: "This is a quote."

• Wrong: "This is a quote."

How to insert English quotation marks:

• Quotation mark lower " : Alt﹢0132 (Win) or copy from the character map

• Quotation mark upper " : Alt﹢0147 (Win)

• MacOs: most editors will enter them automatically when the keyboard language is set correctly

Hyphen vs. hyphen

These are two different characters with different uses:

• The hyphen (-) is used as part of words: Czech-Slovak, blue-white, e-mail. There are no spaces between the hyphen and the surrounding text.

• The hyphen (-) is used to separate a subordinate clause or to replace the word "until": Prague - Brno, 10-20 km, "He came - and left immediately." There are spaces (or indivisible spaces) between the hyphen and the surrounding text.

Other Czech typographic rules

• Three dots: always as one character ... (ellipsis, U﹢2026), not three separate dots

• Numbers: thousands are separated by a fixed space (1 000 000 Kč), not by a full stop or comma

• Decimal point: in Czech, a comma is used, not a period (3.14 - not 3.14)

• Abbreviations: abbreviations of type, etc., etc., are followed by a period. There is no period after abbreviations of units (km, kg, px)

Contrast and accessibility of text

Typography must be legible to all users, including those with visual difficulties. Accessibility is not an optional extra - it is a standard and in many cases a legal requirement.

Minimum text contrast ratio

The WCAG 2.1 standard defines minimum contrast ratios between text and background:

Check the contrast using tools like WebAIM Contrast Checker or Stark (a plugin for Figma). Gray text on a white background looks elegant, but may not meet the minimum requirements.

Most common text contrast errors

• White text on a light colored background: visually attractive but often insufficient contrast

• Transparent text over a photo: contrast varies depending on the part of the photo below the text - always add a dark overlay

• Coloured text for additional information: ensure it is sufficiently legible without colour resolution (for colour blind users)

Handy checklist for setting up typography on the site

Before you launch the site, go through this checklist:

• Basic text body font: minimum 16 px, ideally 18 px

• Text body line spacing: 1.5 to 1.7

• Maximum text column width: 680-760 px

• Hierarchy of headings: each level clearly distinguishable from the others

• Mobile typography: scaled headings, text minimum 16 px

• Text contrast: meets WCAG 2.1 AA (4.5 : 1 for normal text)

• Font contains Czech diacritics

• Indivisible spaces after single-letter prepositions

• Czech quotation marks instead of English quotation marks

• Correct hyphen vs. hyphen

• Maximum of two fonts per site

• Testing on a real mobile device

Good typography on the web is invisible

The user won't notice it - but they will feel it. They read the entire article comfortably, find the information they're looking for without overwhelm, and leave feeling that the site looks professional. Conversely, bad typography is discouraging, tiresome and undermines brand credibility.

Start with the basics: the right font for the site, legible text size, sufficient line spacing. Then fine-tune the details: heading hierarchy, mobile version, Czech typography rules. And always test on real devices.

Typography isn't a one-day job - it's care that comes back in every paragraph you read.