Responsive Typography: The Basics

When we create websites, we usually start by defining the text of the document. The definition of the main text sets the width of the main column on the page, everything else should happen by itself. A must . Until recently, the screen resolution was more or less the same. Today we are dealing with a huge number of screens of different resolutions and sizes. It makes things a lot harder.

During the restart of our site, I wrote a short post about responsive typography, focusing exclusively on our latest experiment: responsive fonts. Without knowing the history of iA, you will miss some key aspects of responsive typography and design on our new site. Instead of mixing all our articles on this topic, I decided to start from scratch and talk about responsive typography step by step. This is the first step.



To avoid developing layouts for each screen size, many developers have adopted the concept of Responsive Web Design. The idea is that your layout automatically adapts to the current screen size. There are several definitions of this concept. But I would like to say this:

1. Adaptive layouts: changing the layout step by step a certain number of times
2. Rubber layouts: continuous change of layouts to various sizes

Although both have advantages and disadvantages, we believe that an adaptive layout with several sizes is more acceptable, as readability is more important than a layout that always fits perfectly with the screen size. This is a rather controversial opinion, but achieving optimal readability requires some control over the size (column width) of the text, in which case a rubber layout creates more problems than it solves.

Note:Responsive Web Design has a number of macro-typographic issues (font size, line spacing, column width). Thus, RWD already includes responsive typography. What we focused on in our first post on responsive typography was mainly about using graded fonts. Next, I would like to talk about gradation and delve deeper into the basics of responsive typography on displays.

Font selection

Right tone

Sooner or later you will have to decide which font you want to use. Choosing a font is basically a matter of tone, but since each font has its own qualities and requirements (or limitations), choosing a font has many visual and technical consequences. Thanks to web-fonts, you have a huge selection of fonts, which makes this process even more complex.

We created our own font for this site to experiment with gradation. We chose serif because it matches our tone and perfectly reflects the sophistication of the content (at least, it seems to us). For iA Writerwe chose a monospace font. Since the main goal of our application is to help you quickly and easily work, we specially chose Nitty - a font that looks strong and neat at the same time. The decision to use a monospaced font also came from the fact that the OS of the first iPad did not support automatic kerning of proportional fonts. Instead of using poorly rendered proportional fonts, we immediately decided to use a monospace font.

Serif or sans serif?

Usually the choice falls between serif (Romanesque) and sans serif (grotesque). Actually, this is a difficult task, but there is a simple rule that can help you: the Roman font - the priest, the grotesque - the hacker . One is not better than the other, but for various reasons, authoritarianism is felt in Roman fonts, while the grotesque gives away democracy. Five thousand years of printing history are described in two lines, so do not take it too seriously.

Many people think that for screen typography the question “romance or grotesque?” Answers itself. In fact, not everything is so simple. Despite the general belief, both types of fonts look good on the screen with a size greater than 12px. A roman font smaller than 12px looks blurry, but (and this brings us to the second point) on modern 12px monitors is definitely too small.

What size?

The size of the text on the page does not depend on your personal preferences. It depends on how far the reader is from the screen. Since the screens of desktop monitors are further from the reader’s eyes than the book, the metric size of the text on the screen should be larger than the size of it in the book.

The figure below shows that the farther the text is from you, the larger its size should be. Two black and two red letters have the same metric size. But since the right pair of letters is further away, their perceived size is smaller. The red letter A on the right is perceived as equal in size to the black A on the left:



The farther the text is from you, the less it appears visually. When you increase the distance, you need to increase the size of the text to compensate for the large distance from the eyes of the reader to the text. How much larger the text should be in itself is a science. If you do not have experience in this, try comparing the book to look at the text on the screen in front of your eyes, at a convenient reading distance.

Graphic designers with no experience in web design are extremely surprised at the large size of text on web pages compared to text in books. Keep in mind that the text is large only if the book and the monitor screen are on the same plane, but in the future everything will be different.



If after increasing the size of the text on the page it initially annoys you, do not worry, this is normal. When you get used to it, you will no longer want to return to the “standard” smaller size.

We have been promoting these “prospectively proportional” text sizes since 2006. At first, our assertion that Georgia 16px is a good guide for the size of the main text on the page caused a lot of anger and even laughter, but now it is a more or less generally accepted standard. With an increase in screen resolution, these standards are gradually becoming obsolete. But more on that later.

Line spacing and contrast

While text size can be estimated using a perspective trick, line spacing requires some adjustment. With increasing distance and (as we call it) blurry pixels, it is advisable to give the text on the screen a little more space by increasing the line spacing. 140% is best practice, but of course it all depends on the font used.



You need to be sure that the contrast between the text and the background is not too weak (gray text on a light gray background) or not too bright (pink on yellow). Since the fonts were designed to be displayed in black on a white background, using a black background can be difficult, but it can work if everything is done correctly. In modern high-contrast monitors, it is preferable to choose either a dark gray color for the text or light gray for the background instead of the standard pure black on a pure white background.

iPhone vs iPad

Much of what we learned about responsive typography came to us while working to achieve the best typographic effect for our application. When we developed iA Writer for iPad, we spent weeks to achieve this effect. The high resolution of the iPad’s display has become a difficult task for us, we spent a lot of time to understand how it works. When Apple introduced the new Retina display for the iPhone and later for the new iPad, things changed again. We could write a whole book to explain how we got the famous typeface in iA Writer, but we still want to tell you so much about the basics of typography, so let's continue.

If you compare the current version of iA Writer for the iPhone and the version for the iPad, you will surely notice a difference in font sizes.



Why did we set a different font size for the iPhone and iPad? If you carefully read the explanation above, you probably already guessed.

1. The distance to the screen of the mobile device is not always the same, if you hold an iPad in your hands, it will be a little further than the iPhone. If you use an iPad at a table, put it on your knees while sitting on a sofa or keep it close to your face while lying in bed, the distance to the screen in each case will be slightly different. This was another challenge for us, since the distance on desktop computers and laptops does not vary as much as on mobile devices. To achieve optimal readability of the text, we chose the font size based on the maximum possible distance to the screen of the mobile device. This size is slightly larger than what you are used to reading text in bed, but working with text in such conditions is not always convenient and no one uses applications for working with text while lying in bed.
   
2. There is much less space on the iPhone screen, so we have to make adjustments.
   

Fortunately, iPhones are often held closer to the face than tablets, so we used a smaller font size that works great for a small screen. From an average reading distance on both the iPhone and iPad, text is visually perceived approximately the same.



Since the iPhone is closer, the line spacing may also be slightly less, which again is a necessary adjustment for the device’s small screen:



Not everything goes in your favor when you design for screens. Interactive design is a technical matter: it’s not about finding the perfect design, but about achieving the best compromise. In our case, we had to reduce the line spacing, indentation and the distance between the letters:



The adjustment is so delicate that if you are not aware of these changes, you will not notice them at all. Why didn’t we just get rid of the indent? Indentation is not a matter of aesthetics; it allows the text to breathe and allows the eye to easily move from line to line. If you think that all this sounds esoteric: no, so far we have just covered the basics.

What about desktop computers?

Some complain about the large font size in Writer for Mac. Just like with the iPad, we had to choose the largest minimum font size, which we did for the Mac. We tested this size on a 24 '' Mac and visually the text is more or less similar in size to the text on other devices.



Having a finite number of Mac computers with iA Writer installed, we reviewed all possible options and made sure that the previously set font size is the best option for all devices.



You might be wondering: “Why not let users choose the font size?” Choosing the font size is not a matter of taste, it all comes down to achieving the optimal distance for reading text. Since most websites have a relatively small font size, new users will set the size to which they are accustomed: but basically it is a rather small size at which you will never get the proper comfort of working with text. The main reason for this is not that we want to force users to take a new look, but that when working with our application you don’t have to configure it. All you have to do is open the editor and get started. This is the secret to the success of iA Writer.

Well, why not just change the font size automatically to fit the current screen size? Isn't this called responsive typography? That's right, and we are working on it. Now, regarding automatic resizing, you will also have to select the most comfortable text saturation in order to be sure that the font looks readable at any size and screen resolution. With a change in font size and resolution, the optical perception of the text changes. That is why iA Writer for Mac, iPad1 / 2 and for the new iPad have different font sizes. To explain the full gradation logic of digital fonts, I need a little more time. Therefore, stay tuned, the second part is on the way!