Should A Web Designer Care About Relative Font Sizes? | Frontify (2024)

FAQs

Should A Web Designer Care About Relative Font Sizes? | Frontify? ›

Especially, if you're designing for multiple resolutions with responsive design. Think of generally smaller or larger font sizes on mobile phones. It takes time to recalculate every pixel value to the new base font size. This is where relative font sizes become useful.

A website should keep the number of fonts to a minimum—no more than three in total. When a site has too many fonts, the user can become disoriented with so many shifts in the visual design. The chosen typefaces should have a variety of weights and styles that can be used strategically in the UI design.

People with low vision can improve the readability of a Web page for themselves by increasing the font size. They do this using the browser's text-size preference settings. If a fixed font size has been specified, though, the user cannot exercise this control.

Use no more than three font sizes and styles in your web content. Make headings larger and bolder than body text. Be consistent with font sizes and styles for each level of hierarchy. Use contrasting font styles for different types of content (e.g., serif for body text and sans serif for headings).

It's important to use responsive font sizing to improve user experience, as it gives your users a good first impression, while ensuring readability and consistency.

In general, you should only use a maximum of three fonts per design: the title, the subhead, and the body of the text. You get an exception if your design text is long.

Use the principle: Less is more

However, you also need to keep in mind the contrast. If you use two fonts that are too similar, they will not wholly draw users' attention. Try not to choose two Sans Serif fonts but instead choose a combination of Serif and Sans Serif, making your content look even more attractive.

Relative sizing has several advantages over traditional methods of estimation, such as using hours or days. First, it is faster and easier to compare user stories than to assign precise numbers. Second, it reduces the uncertainty and variability that often affect time-based estimates.

Optimal font sizes for desktop

Body text - Font sizes should be around 16px to 18px for legibility (or 1.6rem to 1.8rem using our sizing rules mentioned above). Keep in mind that more expressive typefaces may be less legible, so if you can afford to go a bit larger, then, even 21px can be pleasant to read.

From a design perspective, font size is an important aspect of creating visual hierarchy and drawing the user's eye to the most important elements on the page. Larger font sizes can be used to make headlines and calls to action stand out, while smaller font sizes can be used for body text and supporting information.

What is the text size rule for graphic design? ›

Speaking of web typography, the number of characters per line should be in the range of 40–70 characters for computers and tablets and 30–40 characters for phones. For website texts, the optimal size is 16–20 px. This means that the approximate width of the text block should not exceed 760 px.

Summary of key rules | Butterick's Practical Typography. The four most important typographic considerations for body text are point size, line spacing, line length, and font (see font recommendations), because those choices determine how the body text looks.

There is a typographic rule of thumb for combining fonts from unrelated families: The more dissimilar the type designs, the better the mix. The rule, however, carries a caveat: one typeface should take the lead, and the other should be a supporting player. Two highly distinctive designs rarely combine well.

With the proliferation of various devices and screen sizes, responsive typography is crucial for ensuring that text adapts and remains legible across different devices. Implementing techniques such as fluid typography and media queries allows the typography to adjust dynamically based on the available screen space.

Especially, if you're designing for multiple resolutions with responsive design. Think of generally smaller or larger font sizes on mobile phones. It takes time to recalculate every pixel value to the new base font size. This is where relative font sizes become useful.

Best Practices

Prioritize accessibility and responsiveness by utilizing em and rem units instead. Set Font Sizes with rem : Use rem units for setting font sizes in most cases. rem ensures that font sizes are relative to the root element's font size, making them responsive to user preferences and zooming.

The Web Open Font Format (WOFF)

WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata.

Text Sizes

Different font sizes can be in a golden ratio. Let's say the body-font size on your website is 16px. The header-font size could be a golden-ratio multiple of your body size — that is, it could be 16 φ = 16 x 1.618 = 25.88 or roughly 26px.

The best font for websites depends on the purpose of the website and the target audience. However, some popular and well-regarded fonts for websites include Helvetica, Arial, Georgia, Tahoma and Roboto. Arial is another popular sans-serif font that is similar to Helvetica.

Rules font features modern capitals (optically-matching widths). Next to no contrast in counter-forms. Closed edged terminals and an elegant twist bringing a colorful aspect to optical gray in text layouts. The whole font family is topped off with squared endings, giving the whole font family a great pace.