2 Essential Principles of Responsive Typography

admin February 27, 2015 Comments Off on 2 Essential Principles of Responsive Typography
2 Essential Principles of Responsive Typography

There was a time when Web designing was just limited to a single layout proving to be apt for any occasion. However, with more complex requirements and mobile devices in, the scenario began to change. More professional and complex sites without cartoonish clipart or flashy visuals took a hold, although without any change in the sole definition for the design’s size. Nowadays, this definition has changed, as screen resolution is more important for ensuring a proper fit into big and small screens. As an efficient approach, a single layout adapting to each screen regardless of resolution is now taken up, which is technically called responsive design.

Responsive Typography for a Responsive Design: An Overview

Usually, responsive design focuses on a fluid grid as well as fluid images. However, what it lacks is the focus on typography, even though content is the most vital element for responsive sites. Responsive typography refers to the use of fonts adapting to diverse resolutions such that they are visible without disturbing the layout. Instead of using a font for the mobile version of a site, a complex or adaptive font is used, which has the ability to stretch or shrink as per the screen without affecting legibility or screen overlapping.

Effective Responsive Typography: Principles

For making the responsive type highly effective, two main principles are to be followed namely, Resizability and Optimization of line length. Resizable type refers to the text that is capable of being resized as per the screen size as well as by the user. Optimized line length is for readability. For example, in some cases, having shorter line length and content area is more feasible although the content can stretch.

For sizing the content, most professionals use one of two units of measurements namely, ems and pixels. Of the two, the latter is better because of the ability of resizing the content in browsers. However, ems are more complicated than pixels due to which Rems have been introduced as a better alternative. Although rems work similar to ems, they are relative to the elements of HTML instead of individual parent elements like ems. As a result, proper sizing becomes simpler with rems that are now accepted by all modern browsers, including Opera 11 and above.

For applying rem units to the default font size for type resizing, the designer needs to apply it to the html element, instead of the body (parent) element. This is done by specifying html {font-size: 100%;}. Further, the designer has to mention the font size for each size of display size, for which experimenting with actual sizes on different devices is essential.

While resizing is simpler, retaining the right line length across devices requires tweaks. After a lot of debate, a standard as per the Baymard Institute has been set as 50-75 characters on each line. It has also suggested going with a fixed width but this is contrary to the goal of responsive design. This triggers the need of a different approach: Considering the different screen sizes and setting the width for text areas.

I would suggest choosing a diversely experienced service provider such as Webcreationuk. As a tip, do check out Webcreationuk reviews online.