nav line

Typography in Responsive Design

The basis of the design of any web is to craft the easiest possible access to the content for users. The basic parameters of the accessibility and readability of the text are a sufficient contrast against the background and mainly the font size. And it is just what we are going to deal with now.

When designing a responsive website, we have to take into account the fact that the current devices have various densities of pixels. Thus, it is no more valid that during designing the web I can rely on that every monitor has 72ppi (points per inch). The manufacturers try to get still higher resolution into devices without increasing the dimensions of the display, hence nowadays, it is common to find the resolution of 300, 400 or even 500ppi in mobiles or tablets.

The effect in practice is such that if setting the font size to 36 pixels, it will have the height of nice 1.2 centimetres on the monitor screen, but only about 2.5 millimetres on the mobile with 360ppi. In this case, it is quite difficult to speak about the same user experience and it is necessary to adapt the font to the size of the device. These are three methods to optimize the content:

Exact size for each viewport

The first and a relatively easy way to set up the text size is to define it in exact pixels for every viewport. With reasonable setup it is possible to cover all major display sizes by 4 viewports, so the main advantage of this method is its relative quickness.

The “Best practices” for the best possible readability of the text is to have the number of characters per line in the range from 45 to 75 characters. For mobile phones, it is generally recommended not to set up the size lower than 16 points for the main text and less than 14 points in the case of a tablet. If you display the same content on the desktop, tablets and mobiles with various pixel densities and you place their screens side by side, the text should have visually approximately the same size on all devices.

Relative units

Although, to set up the exact size for the text is quick, there are cases in the practice when this solution is not the most appropriate. For example, if we set up the viewport from 360 up to 768 points, we obtain the range of 408 points including a quite wide range of displays and the font size will be the same on all of them, which can be problematic. In addition, the static units of the font used on the responsive web full of relative sizes can seem a bit unduly. The solution of this issue is not easy at all if not willing to define 6 or 7 different viewports. Unlike the other objects on the page, the text can not be ordered to: adjust its size to the width of the window.

It the near future, this is likely to be changed. The creators of browsers come up with new relative units such as rem, vw or vh. Such units would significantly help to optimize the text size on larger viewports. The problem is that each of these units works only in some browsers, so they are not applicable globally.

In practice, there is a pseudo-relative unit em used. It determines the size of characters by means of the inheritance from the superior object. The text with the height of 3em will be three times larger than the setup of the text size for the whole page. Thus, the unit permits to set up the ratios of the text sizes compared to the basic value and to modify only this basic value for every viewport. This can significantly facilitate the coding of the web, although only one font size is obtained for the whole viewport, similarly as in the first method.

The dynamic range of the text

An interesting method is the method not dealing completely with the text size and using one of the two previous methods for its adjustment. This method deals with the optimization of the text content as such.

Young English creative worker Frankie Roberto created a demo showing how the responsive text can look like. This solution is based on the idea that the smaller is the resolution of the device the less content is displayed on it. So, for every smaller viewport it hides the part of the content or with the mobile-first approach - it adds the parts of the content for every larger viewport. His experiment has inspired other designers who started to work with this method and the opinions on it are quite divergent. From my point of view, this, a little bit adaptive solution can be excellent for some web sites and its content.

It can be objected that this method is in contradiction with the original idea of RWD, which is to provide the user with the same content and experience on all devices, but as I wrote in the article Responsive web design – does not depend on the device, it is the context playing constantly greater role in the provision of web experience. If you find out that the visitors of your web do not read long texts on mobiles, but they do on desktops, just offer them shorter text on mobiles. The main point is that the user understands the idea to be transmitted to him from your web.

Which method to use?

The first two methods you probably use in the process of the preparation of the web. A graphic designer must define the text size precisely in pixels in the previews. Nowadays, hardly any coder will prepare the responsive web without using the em units or %, which work very similarly.

The situation can be simplified with the mobile-first approach. You know what content shall be on the mobile and what size it should have. Finally, irrespective of whether you decide to add the content and to reduce the text for tablets and desktops or not, you can be sure that for users it will be much easier to read the large text on the screen than the small text on the mobile.


Typography in Responsive Design


Related articles

Search in the blog

Web integration

Web integration as a new business area of "big" web agencies.

about web integration