Typography in essence is an art or a technique of arranging certain contents to make written texts legible, readable and appealing when displayed. It also applies to the style, appearance and arrangement of the letters, symbols and numbers. Typography has now become an integral component of the user interface design. A responsive design or responsive typography is a practice of writing CSS styles in such a way that it displays the contents of a website or a page correctly and similarly on all devices. In this article, we will tell you about the ways you can master the art of responsive typography.

The concept of typography has been in existence since the 11th century. Earlier, typography was considered a specialized craft associated with books, magazines and other notable public works. Interestingly, the first known example of typography was found in the Gutenberg Bible. It was one of the earliest major books printed using mass-produced movable metal type in Europe. The bookmarked a revolution and has contributed a lot to modern-day typography.

Then came the invention of the internet which gave birth to the concept of web design and along with it came a creative explosion. Web designers now had an abundance of different fonts and type options. This brings us to the current digital age, typography has become so much more than just choosing beautiful fonts. It is now an essential part of both the print and the digital world. Today there are multiple modes or platforms that allow us to engage with the users. From the availability of different devices such as tablets, mobile phones, desktops and even smartwatches to multiples platforms such as blogs, webpages, social media pages, etc. Responsive typography allows us to stay consistent on all of these different platforms with the content that is provided.

Good responsive typography is very useful in eliciting emotions in the readers and convey specific messages effectively. It helps establish a strong visual hierarchy and provide a graphic balance to your page or website. It guides and informs the users, optimizes readability, accessibility and ensures that a proper user experience is provided. In simple words, it breathes new life into the content and everything else that it includes.

 

The following are a few hacks that can help you master the art of responsive typography:

  • The importance of characters per line (CPL):

Legible content should be a designer’s prime focus while working with type. CPL refers to characters per line. The height and width of each line, the spacing between the letters and words, even the shape and weight of each letter, depends upon the characters per line you are using. This consequently affects the overall view of your page also.

Responsive Typography

Source:99designs

 

As you can see that the lines with 60 characters are better invisibility as compared to the line which has 90 characters. Remember, the main goal is to make the reader feel comfortable with whatever he/she is reading and make it easier for them to understand. When the lines are too long it makes the reading process difficult, slow and tiring. A better alignment will make the lines and characters easily recognizable.

A few tips:

  • 60-character max: Use this when working with rows of text (that are not in columns).
  • 45-60-character max: Use this when putting text in multiple columns.
  • 70-75-character max: Use this when putting text in 1-column.

 

  • Understand the relationship between CPL’s and width:

Responsive design or responsive typography gives us the ability to use the entire screen width. However, it is very important to know how exactly does the CPL affect a page’s width. When the design is sized up or sized down, it affects the CPL as well.

Here are a few design formulae’s that can help you understand this better:

  • A font’s point size multiplied by 2 = a column’s width (in picas)
  • 1 pica = 12 point
  • 1 em = the current specific point size
  • 10 points multiplied by 2 = a 20-pica column width
  • If 20 picas equal 12 points, then 20 multiplied by 12 = 240 points
  • If 1 em equals 10 points, then 240 points divided by 10 points = 24 em

The typographic units and formulae make it easier to understand the relationship between CPL and the width of the page. It also helps in bringing consistency and legibility for the users.

Responsive Typography

Source:99designs

 

  • The importance of bandwidth:

Since the use of mobile devices has increased drastically, websites often have to go through rigorous scrutiny to reduce pressure on bandwidth. Due to this many core elements of the web design are removed, the first elements to go are fonts. This affects the overall feel and visibility of the page. To counter this and optimize the effect for low bandwidth users, try simplifying your design by using web-friendly fonts.

 

  • The Goldilocks approach:

While most responsive typography solutions offer to allot of information about how to optimize the quality of the type, not many take the screen resolution into account.  This means that with the multiple types of devices available to use such as mobile phones, tablets, gaming consoles, etc. It is very difficult to achieve uniformity and consistency among the web pages. Goldilocks’ approach is one such approach that helps you achieve this consistency. By adopting this approach, it will be possible to adjust the size of the layout in order to accommodate screens of any size. It makes your web design independent of resolution.

 

  • Instead of measuring column widths, we change the pixels:

Here is another very simple hack that you can implement to make your typography more responsive. Instead of measuring the column width in em units, we change the value to pixels. You can do this by using a simple equation:

Body font size =   column width in pixels/desired width in em units

Remember, 1 em equals the current specific point size. This solution will allow fluid scaling of text columns while also preserving the CPL at 60. You can also implement multiple column layouts using the CSS column count.

Responsive typography is a mixture of many things to many people. In essence, it is the arrangement of content and type in a web design that in turn allows the optimal user experience, a fluid layout and legibility. The internet is filled with solutions that can help you achieve this. Before we end the article, here are a few other solutions that we think might come in handy as well.

  1. Use larger texts.
  2. Use fonts for icons as they can be styled with CSS and also can be resized.
  3. Use web fonts that are specific for mobile devices, different fonts for different screens
  4. Implement proper CPL ration 50-75
  5. To match the device’s screen size and resolution scale the base type. Remember that all font sizes are expressed as a proportion to base font size when using ems in CSS.
  6. You can also adjust the font size based on the distance between your eyes and the monitor.

 

ReadMore: Typography 101. Exploring the History of Type Technology

: ,

Leave a Reply

Your email address will not be published. Required fields are marked *