[email protected]

Responsive Typography: Bigger, Brighter, Bolder

Despite the growing trend to visuality and great use of photos, pics and sketches to present data on the web, there is still much about text. Web is still 95% about typography and we still need to read lots of text to get all the necessary information. That’s why typography is still one of the main design elements that requires a lot of attention and thought-out approach.

Responsive Typography Main

In responsive web design typography plays essential part. People won’t stay long with the website if they need to strain their eyes to read the info. Responsive typography matters as much as responsive layout structure, customizing images and navigation comfort. And making a text responsive usually means more that simply resizing the text container and refill it with the same text.

Amplifon

Amplifon

When we speak about responsiveness of the typography we musn’t forget that the case is not only in making the text readable for smaller devices like tablets and smartphones. Your text should look perfect and read well on bigger monitor and laptop screens. Thus, keeping your typography responsive is not just making it bigger. Let’s take a look at the characteristics of the typography you should take into account when designing the responsive website.

Size

Making a text for the mobile version of the website of a proper size is a rule of a thumb. No one wants to feel like Cinderella sorting out lentils when reading a tiny text on a small screen. Your typography should be of good size allowing to read it without any struggle. Of course, the user can zoom in to see the text larger, but it comes out against the idea of the responsive web design. Users should get the text of appropriate size without additional manipulations on the screen. Usually, we introduce to the mobile design a bigger typeface that we have on our regular website.

Palais Thermal

Palais Thermal

In the example below we see larger font for call-to-action text. However, the headline text was made smaller to fit it into the screen width.

The Perfect Kilometre

The Perfect Kilometre

Resizing typeface for mobile may be done in a few ways:

  • Resize the font with pixels;
  • Resize using em units;
  • Resize with the use of rem units.

Pixels and ems are more common for designers as they are easy to apply. With pixels you may set the size for most elements in Photoshop. Ems are much more easy to use than pixels as far as they allow resizing the text right from a browser. But they are much more dependent on the parent element and the text’s context so they lose their flexibility in many cases.

Rems are the newest alternative to means mentioned above. It’s main advantage that it applies the font sizing to the entire html document, not its parent element. You just need to set your default html element size and then simply specify the font size in percents for each of the rem units and each device width. The biggest drawback of rems for now is that not every browser supports it so in some cases the setting should be done manually for each element.

Line Spacing and Length

Line spacing as well as the content block width are as much essential for text perception as the font size. Proper spacing between the text lines improves its readability. Adding enough space between the text lines, blocks, headlines and other elements that contain typography helps to avoid crowding and allows highlighting important elements.

We Are Goat

We Are Goat

However, it’s essential to not overuse the spacing and add a reasonable amount of it between the lines and heading. Too much empty space between the actual text and its heading may ruin the design and make reading inconvenient. There are many tools around the web that help determine what spacing is better, but you can also use your intuition to create the spacing that look the best on the device screen.

Sydney Stockholm

Sydney Stockholm

Line length is another important factor that impacts readability and user experience. Despite the statistics claims that optimal line length is something between 45 and 75 characters, it differs depending on the person. Moreover, bigger font size obviously will put less characters in the line, so if you use large font on a small screen you possibly better to go below the 45 characters level.

Interactions

Interactions

Another way of establishing the line length is to set a specific width for the area that contains the text. In this case that width may determine the text size and line length. The bigger the font size inside the container will be, the less characters will fit into the line. thus, you may choose between setting bigger font with shorter lines or smaller typeface with more characters in a line.

Paper Tiger

Paper Tiger

If you design for smaller smartphone screens you may discard the text container and let the text to take all the screen area. However, if you word with larger screen sizes like tablets you may wish to divide the text into sections or columns. It makes the reading easier because the user doesn’t need to move the eyes along the long line and reading becomes faster and more pleasing for the eyes.

Color and Contrast

Color is the key concept for typography that also determines how a person perceives text. There’s no surprise that different colors have different psychological impact to a person and may determine emotions one gets with a certain color.

Colors used for the font should be well chosen as well as the background they used over. The simplest way is not to use contrast color combinations that are usually a great taboo for desktop screens, like bright red with blue or pink with orange.

It’s not always possible to set a proper color contrast between the font color and the background hue. Primarily because every user have different contrast settings and contrast may look stronger or weaker on different screens. Sometimes designers apply more contrast or brighter hues for mobile version of the typography to help text perceiving. However, applying some basic principles about color combination and color scheme use to responsive typography is essential.

Hundredth Monkey

Hundredth Monkey

Font Type

Type of the font is not the most important factor. However, some basic considerations about the typeface choice can be applied to the responsive typography. First, it’s the use of the same font that is used for a desktop version of the website. However, some font types may look poorly on mobile screen.

The main point to consider when choosing a font for responsive web design is whether to choose a serif or sans serif font type. There is an unspoken rule that is used for desktop computers: selecting a serif type for headlines and a sans serif one – for the body text. This rule may be used for mobile devices designing. Most designers choose sans serif types for all text blocks on the site – they look more prominent on a smaller screen while serif elements may merge together and create unnecessary ligatures that will look messy.

Break the Bag Habit

Break the Bag Habit

Sometimes it’s reasonable making the text for mobile versions in bold or demi-bold type or using a bit brighter hue for it to make it look brighter and easy-to-read. Italic type is not the best option for body text and is better to be avoided in responsive typography.

Adventure

Adventure

A Few More Thoughts About Responsive Typography

As I mentioned in the beginning, visual elements take over functions of text and typography in modern web. In case of responsive web design, sometimes developers tend to replace some of the website typography elements in mobile version with visuals. Thus, sometimes navigation menu categories or button texts may be replaced with the relevant icons. In the example below we can notice that the mobile versioan removes the text logo of the company and replaces it only with visual image of seagulls.

Elegant Seagulls

Elegant Seagulls

Making a great use of white space is another great idea for responsive design. It allows highlighting focus points and essential elements of the layout and single out navigation elements like menu buttons or call-to-action blocks. The responsive design of the website below removes almost all the text from the Home page and leaves only logo and large buttons.

MMPW

MMPW

Here are a few more examples of great responsive text and typography website designes.

Mixd

This design features enlarged text logo and hidden menu categories while text appears larger and brighter. While the desktop website version displays the visual (a wheel on the left) larger that text, mobile version shows bigger typography.

Mixd

Syrius Group

The design features a lot of whitespace around text elements that draws attention to them. A button in mobile version loses its frame and focuses just on text.

Syrius Group

Love Public

Love Public responsive web design pays attention to the navigation menu. Navigation menu typography of the desktop version is less contrast while the mobile version features categories text on a more contrast background what makes it more prominent.

Love Public

Barista Prima

The following website design is also about navigation menu typography. The mobile design removes all the text of the buttons except the categories titles.

Barista Prima

Helen Stark
Helen is a passionate writer who finds inspiration in everyday things and is happy to share them with readers. She has been creating content for fashion, beauty, food and tech blogs during last years. You can follow Helen on Twitter
More articles by Helen Stark

Related Posts