Web Design Typography Part 3: Text Sizing

Varying the size

Font size contributes to establishing a visual hierarchy within the content. Headings and subheadings are typically larger to create prominence and draw attention to important sections. Smaller font sizes are suitable for body text, providing a comfortable reading experience. The consistent use of font sizes throughout the website helps users navigate and comprehend the content more efficiently.

Responsive web design further emphasizes the importance of font size. It ensures the text scales proportionally and remains legible on various devices. By carefully selecting and implementing font sizes, web designers can optimize readability, establish visual hierarchy, and improve the overall user experience of the website.

Relation to font type

Font sizes should be considered in relation to the specific font type selected, such as serif or sans-serif. The characteristics and design of different font types can influence the optimal font size for readability and visual aesthetics. Here’s how font type can impact font size selection:

1. Serif Fonts: Serif fonts have small lines (serifs) at the ends of characters, which can aid readability in printed materials. In web design, serif fonts are commonly used for body text or paragraphs. They may be used at slightly smaller sizes for body text while still maintaining readability.
2. Sans-Serif Fonts: Sans-serif fonts lack the small decorative lines at the ends of characters. They have a more modern and streamlined appearance, and are widely used for headings, subheadings, and other display elements. Sans-serif fonts often benefit from being slightly larger sizes to maintain legibility and make a stronger visual impact.

Font size should always prioritize readability. It’s essential to test the chosen font sizes with actual content to ensure optimal readability on different devices and screen sizes. Additionally, considering the target audience and the context of the website’s content can help determine the most appropriate font size.

Font type can influence font size selection in web design. Serif fonts may be used at slightly smaller sizes for body text. Conversely, sans-serif fonts generally benefit from being used at slightly larger sizes for headings and display elements. Ultimately, prioritizing readability and ensuring optimal legibility should guide the selection of font sizes based on the chosen font type.

Measuring font size

When it comes to font sizing in web design, there are four common units of measurement: pixels (px), points (pt), em, and rem. Here’s a breakdown of each unit:

Pixels (px)

The pixel is an absolute unit of measurement that defines the font size in terms of pixels on the screen. When using pixels, the font size remains fixed regardless of the context or the parent element. For example, if you set a font size to 16px, it will always be 16 pixels tall. Pixels allow meticulous control over font size. Designers can specify exact pixel values, ensuring consistent appearance across devices.

Points (pt)

The point measurement is based on the physical dimensions of printed type, with each point representing a specific fraction of an inch. One point (pt) is equivalent to 1/72nd of an inch. Therefore, if you set a font size to 12 points, it means the height of the characters will be approximately 1/6th of an inch. You may have guessed, points are ideal for online material that is intended to be printed. You can be certain it will look the same relative to other elements in print. However, use points sparingly, as in only for materials intended to be printed. Like pixels, points do not scale with screen size and are not great for interactive content, blogs, or landing pages.

em Units

The em unit is a relative measurement that is based on the font size of the parent element. If you set a font size to 1em, it will be equal to the font size of the parent element. For instance, if the parent element has a font size of 16px, 1em will be equivalent to 16 pixels. If you set the font size to 2em, it will be double the size of the parent’s font size. Nesting elements with em units can lead to cumulative effects. If a child element uses em units, its font size depends on the parent’s font size, which in turn depends on its parent, and so on. This can create unexpected results.

rem Units

The rem unit is similar to em, but it is based on the font size of the root element (typically the <html> tag) rather than the immediate parent. This means that the font size defined in rem remains consistent throughout the document, regardless of the nesting level. For example, if you set the font size to 1rem, it will be equal to the font size of the root element. This consistency simplifies font sizing across the entire document. Rem is also immune from the cumulative sizing drawback of em.

Choosing static vs dynamic font sizing

The choice between these units depends on the specific requirements of the design and the desired scaling behavior. Here are some considerations:

• Static font sizes such as pixels (px) and points (pt) offer precise control over the font size and are often used when a specific, fixed size is necessary. However, this precision can be limiting when it comes to responsive designs, where font sizes need to adapt dynamically. Pixels are not suitable for print style-sheets. For print, use points (pt), which relate to actual physical paper size. However, pt sizing varies across browsers and is generally discouraged for web design.
• Dynamic font sizes using em and rem units allow for more flexible and scalable font sizing, adapting to changes in the parent or root element’s font size. This can be advantageous for responsive designs that need to adjust font sizes based on screen size or accessibility preferences.

It’s important to note that different units of measurement can have different effects on how the font size interacts with other elements on the page, such as line height and padding. Testing and adjusting the font sizing units can help achieve the desired typographic outcomes while ensuring readability and consistency across different devices and screen sizes.

Less common units

We discussed the “big four” of font sizing units, px, pt, em, and rem. However, it’s worth an honorable mention to less common approaches. You may run into them and they may prove ideal in very specific circumstances:

• Character units (Ch) represents the width of the zero (0) character in the current font. If the zero character is 10 pixels wide, 1ch would be equivalent to 10 pixels. It’s useful for aligning text or creating fixed-width layouts.
• Viewport width, height, minimum, and maximum (vw, vh, vmin, vmax) are related units that, respectively, represent a font size relative to the size of the viewport. A viewport is, commonly, a browser window or the device screen if the whole screen is in use. The vw unit is relative to 1% of the viewport width. The vh unit is relative to 1% of the viewport height. Vmin and vmax are more flexible, relative to whichever viewport dimension is smaller and larger, respectively. The vmin unit is relative to the smaller of the viewport width or height. The vmax unit is relative to the larger of the viewport width or height.
• Container relative units (Cqw and Cqh) are container-relative and depend on the dimensions of an element’s container. If the container width is 200 pixels, 1cqw would be equivalent to 1% of that width.

Striking the balance

Remember that choosing the right unit depends on your design goals. Whether it’s precise control, responsiveness, or scalability, each unit serves a specific purpose. Selecting the appropriate font sizing unit involves balancing precision and adaptability. While static units offer fine-grained control, dynamic units ensure flexibility.

Also remember that different units impact line height, padding, and overall layout. Rigorous testing and adjustments are essential to achieve harmonious typography across diverse devices and screen dimensions. So, whether you’re crafting a pixel-perfect interface or an adaptable web layout, consider the context and choose wisely!