The true responsiveness of your website design is more than a framework that scales to every device, it also requires typography to adapt to optimal readability as well.

Responsive typography will adjust so that text elements also change size and scale on websites. While this is the technical answer, there is also a larger design approach that is equally important, because just changing the size of a text element is not always enough.

Let’s dive into responsive typography best practices, some guidelines, and some tools to help you create great type at any size.

Responsive Typography Primer

A solid responsive typography plan will ensure that your content is readable on different devices. This ensures that you have developed a set of rules for interaction, size and scale that will help everything render across devices.

The good thing about this is that for most websites it’s almost two sizes: desktop and mobile. (Overall tablet use for general web browsing has dropped dramatically in recent years.)

A font and scale that looks good on a wide screen may not display well on a vertically oriented handheld screen size.

Now here is the challenge. A font and scale that looks good on a wide screen may not display well on a vertically oriented handheld screen size. This can dictate your font choices and how you plan the site. (Otherwise, you may need to switch fonts between desktop and mobile, which is not recommended.)

As you plan the design, it’s important to think about typographic elements as part of this overall framework so you’re not stuck with a strange responsive typography challenge later. (For example, super wide fonts can present unique readability challenges on mobile screens.)

Responsive typography design considerations include:

  • Typography selection: Start with a font that looks good and reads well on a small screen first. Then test it on a bigger screen.
  • Limit type options: A smaller pallet is easier to manage and is less weighty when it comes to loading times.
  • Consider a fallback just in case: If your desired font won’t load (perhaps the device doesn’t like it or the CDN server is down), allow for an alternate choice that’s very common. (Arial is a popular fallback choice for sans serif fonts.)
  • Design size and scale based on content: Readable typography can depend on other content as much as font choice. The scale and sizes of text elements often vary depending on how much text is being rendered at once and the type of content on the screen.
  • Be careful with line height: a little extra space between lines can improve readability on mobile devices. There is a delicate balance between too much and too little space. For smaller sizes, a line height of 150% or 1.5em can be a good place to start.
  • Font category: Designers have really opened up to more font variations – serifs, experimental, etc. – to be used as a general practice. This can present some challenges when small or on screens where users may use dark mode more predominantly. Type test choices early on to ensure readability if you go this route.

Responsive type sizing goes beyond pixels

Most designers avoid working in absolute numerical units and prefer percentages or ems and rems.

Creating type for responsive designs requires a lot of thought about size and scale. Each designer may have a different opinion on what type of size unit they want to use.

The most popular size units include:

  • Pixels: Common notation for digital font size that records an absolute number
  • Points: More of a print-for-size transfer that is less common online
  • Ems: Size relative to older font size
  • Comments: Size inheriting root styling
  • Percentage: Size based on percentage change from a parent style

Most designers avoid working in absolute numerical units and prefer percentages or ems and rems. Using this model, you start with a base size (like body text) and adjust the size from there.

This can make the math easier (1rem is about 10px) and allows for full scale customization just by changing the default font size.

What does it look like for the default size?

Body text is generally 16px to 18px or 1.6rem to 1.8rem (14px to 16px for mobile). Then you can use the scale you like to size everything accordingly.

If you size your body text or other default font size for computers and mobiles, the scale will take care of the rest.

Find the right scale

The type scale determines how much larger or smaller fonts are rooted in the base or default font. Using this method, your base size is 100% if you like percentages or 1em, if that’s your preferred unit.

Then choose the scale and how that scale relates to CSS positions from H1 to H6 and so on.

There are some common typographic scales that create distinct feelings and harmonies that are much easier to calculate mathematically than randomly assigning values ​​to type sizes.

High contrast type scales

Ideal for large screens, these scales have a lot of variation between sizes. The H1 and body text base will create a lot of drama because of the differences in size.

These scales include (number is ratio of change):

  • Supplemented fourth, 1,414
  • Perfect fifth, 1.500
  • Golden Ratio, 1,618

Medium Contrast Type Scales

This is where most type scales fall and is a safe area for most screen sizes. This is ideal for designs with a lot of text content.

These scales include:

  • Minor Third, 1,200
  • Major Third, 1,250
  • Perfect fourth, 1,333

Low contrast type scales

The least variable of scales is best for smaller type elements used as identifiers. You might see this type of scaling with dashboard-based apps, e-commerce listings, or grid-based elements.

These scales include:

  • Little Second, 1,067
  • Major Second, 1.125

When it comes to creating typography scales, there are some great resources and tools already available if you don’t want to do the math yourself or preview variations in sizes.

Look ahead to intrinsic typography

The next thing to think about in terms of web typography is intrinsic type. Earlier in the year Scott Kellum for CSS Tricks called it “the future of text styling on the web”.

In the simplest explanations, intrinsic typography loses distinct text styles; rather, you define styles based on the ratio of text to the area. The reasons for this are to increase flexibility and write more simple code.

The result is that text “self-adjusts” to the container where it lives and is not connected to the viewport. You can have many more than a handful of preset sizes within a scale that applies to the entire design. The variance becomes almost unlimited.

You can try it using the Type instrument.

Closure

Typography design can be the most important element of any web project. By thinking about how text will be rendered and how it will read at each size, you create more valuable and accessible web experiences for everyone.

It starts with a solid foundation for typography and an understanding of how to adapt for website viewers, regardless of how they interact with the design.



Source link