Responsive typography design: Responsive fonts for web design

Article Description: when we build a website, we usually start with the definition text. The body definition shows how wide your main bar is, and the size of the other columns is defined by its own content. Until recently, the various screen resolutions were more or less homogeneous. Today, we're dealing with a variety of screen sizes and resolutions. This makes processing more complex.

When we build a website, we usually start with the definition text. The body definition shows how wide your main bar is, and the size of the other columns is defined by its own content. Until recently, the various screen resolutions were more or less homogeneous. Today, we're dealing with a variety of screen sizes and resolutions. This makes processing more complex.

In the excitement of rallying, I wrote a blog about responsive typography, which focuses on our most recent experiment: response fonts. If you don't know IA's history, you may miss some of the key points in our newly launched Web site for responsive typography and design. I decided to start from scratch and explain the response layout step-by-step, rather than finishing all the articles. Here's the first step.

To prevent different levels of design for each possible screen size, many web designers adopt the concept of responsive web sites. Word, this is a Web page layout will automatically adapt to the concept of screen size. There are a number of ways to define this concept. I like to use this method:

Adaptive layout: Adjust the layout in steps to accommodate a limited number of screen sizes. Fluid layout: Constantly adjust the layout to accommodate each possible width. There are advantages and disadvantages in both ways, and we believe that the layout adapts to very few reasonable changes in the way we want to be, because readability is more important than the width of the layout at any time. This is not a complicated problem it is questionable in itself, but the optimal readability requires a certain amount of control over the size of the text (column width), and in this view, the fluid layout will create more problems.

Hint: The response design already contains a lot of macro typesetting problems (text size, line height, column width). So responsive design has already included responsive typography in many ways. For the first time on our own website, the article on response fonts is focused on the "stage font" we use. I want to talk about stage in the next article, now to quickly on the screen to enter the question of responsive macro-typesetting.

Select a font

Sooner or later, you need to decide which font you want to use. You choose a font is mainly tonal problems, but, because each font has its own quality, all need (or prohibit) certain processing, the choice of fonts will produce a lot of visual and technical results. There are a number of options available for page fonts, so choosing a suitable font is another test.
We experimented with phased fonts by designing fonts for our website. We chose a serif font because it fits our hue and maps out the refinement of our content. We chose a writer font for IA. Because the primary purpose of our program is to help you get first-hand drafts, we specifically chose the Nitti font, a font that makes you feel powerful but meticulous at the same time. The decision to use the equal-width font is also because the first ipad system does not automatically tighten proportional fonts. We immediately decided to use the equal-width font, rather than using proportional fonts to render the effect very poor.

Is there a serif font or a sans serif font

The usual selection is between the serif font and the sans serif font. This is in itself a very complex problem, but here's a simple rule of thumb to help you: a serif font is a priest, sans serif fonts are a hacker. No one is better than the other, but for a variety of reasons, there are serif fonts that have more authoritarian traces, while sans serif fonts feel more democratic. Remember, this is a 5,000-year typesetting history wrapped around two lazy lines, so don't take it too seriously.

Many people still think that the problem of typesetting on the screen, "liner or sans Serif", solves itself. In fact, it's not that simple. Unlike the general idea, if you choose a font larger than number 12th, there are lines and sans Serif fonts that can act as well. The serif font less than 12th is not sharp enough, but (at the same time, this leads us to the 2nd) on modern monitors, the number 12th is definitely too small.

What size?

Your body font does not depend on your personal preferences, it depends on the reading distance. Because the average screen is a little bit farther away than a book, desktop fonts are larger than the size of a printed one.

The following pattern shows that when your body font is farther away from you, the font you need is larger. Two black and two red A have the same metric size. But because the one on the right is taken farther away, the size will feel smaller. The right red A and the black on the left are the same size as the one in the feeling:

The farther away the font is, the less visually it will appear. You need to set the font larger, when the font is read farther away. Choosing the size of a font is a scientific question. If you don't have any experience, the trick is to put a good printed book at the right distance, and then compare the screen font size.

When graphic designers have no experience in web design, they will be amazed at the size of the text in the body of the page when compared to the font of the page body and the printed one. Remind you that only when you compare in rows and rows you will find that the font is very large, but it will not feel that way through perspective observation.

If you add a body font size, the new font at the beginning of the exciting you, do not worry that this is normal. However, when you get used to it, you don't want to go back to the "standard" small size.

From 2006 onwards we have recommended the "pivot scale" font size. Initially, we declared that Georgia 16th was a good body size reference, which caused a lot of anger and even some ridicule, but now this is more or less a universal standard. As more advanced solutions emerge, the standard slowly becomes old-fashioned.

Row height and contrast

The body font size can be evaluated by the perspective tip, and the line height requires some adjustment. With the farther reading distance and more pixel stains, it is smarter to give the text on the screen a larger row height than the printed one. 140% is a good reference, but of course, it depends on the font you choose.

Today, as a prerequisite, you have to make sure that the contrast is not too weak (gray text, for example, is on the bottom of a light gray) or too dazzling (like pink in green). Since the design of the screen fonts is black to white, a black background is a bit difficult, but it would be nice to do well. With modern high-contrast screens, choosing a black-gray font or a light gray background is desirable, not darker than white. But, still, this is not an important issue.

IPhone vs IPad

Many of the knowledge we have learned about responsive typography comes from finding the perfect font for our writing software. When we designed the IA writer, we spent weeks looking for the right typography solution. At the time, the high resolution ipad screen was a new challenge and it took us a long time to find out how it works. When Apple presented the iphone's Retina screen and the ipad's Retina screen, everything changed. We can write a book explaining how we Got the "ironic" font in IA writer, but there are so many things to say about these very general things, so I'll make it short.

If you compare our latest version of the iphone software with the ipad software, you will find that the font size is different.

Why use a different font size on the iphone and ipad? If you take a serious look at the explanation above, you should have guessed it.

When the distance between people and the screen is not often the same time, usually, you have the ipad at the breakfast table, when you're sitting on the couch on your lap, or when you're lying in bed, the screen is in front of you, and these scenes have different distances to use. This is a new challenge because the distance between desktop and notebook usage is not so much changed. To make it easy to use at all distances we chose the farthest to determine the font size. This may result in a larger font than the one used in the bed, but, at this point, it's not comfortable, and you don't normally put the ipad on your stomach while lying down.
There is only less screen space on the iphone, so you need to focus on making adjustments. Fortunately, the iphone will be placed close to the front of the operation, so to use a very small text size to run perfectly. A similar font size for the iphone and ipad can be obtained from the average reading distance.

Because the iphone will be placed close to the eye, the line can be a little tighter, but also because the screen is very small and necessary:

When you design for the screen, not everything is what you want. Interactive design is engineering: This is not looking for the perfect design, the person is looking for the perfect compromise. In our example, we have to reduce line height, line spacing, word spacing, and so on.

These adjustments are so fine that you don't know, you won't notice how small the line spacing is. Why don't we just take the spacing? Line spacing is not an aesthetic thing, it lets words breathe and helps our eyes jump from one row to another. If you think this sounds hard to understand: No, so far we've only dealt with the beginner's stuff.

What about the desktop?

Some people complain that the writer font on the Mac is too big. Like the ipad (the ipad will be used at various distances), we're looking for the most moderate font size for the Mac screen. At the time, our reference was a 24-inch high-resolution imac, and the resulting font size was more or less suitable for all other devices.

Because the number of Mac computers running IA WRITER is limited, we can decide on different suitable solutions. We looked at the various possible layouts to make sure that the text size was the best compromise on a variety of devices.

You might ask, "Why don't you let the user choose the font size?" However, adjusting the font size is not a question about interest, it is a matter of reading distance. Since most Web sites and applications have a very small font size, new users will choose their usual size from the outset: the font is too small to experience all the pleasures of our writing software. The main reason is not that we want to impose some ideas on all users: what we want is that IA WRITER don't need any setup and fumble, all you have to do is write. This is already a successful public secret of IA writer, and changing this will change the core of the software. (We need to strengthen the same design that is easy to obtain for people with Amblyopia.) ）

So good, why not automatically adjust according to the resolution of the device? Isn't that a real responsive typesetting? Yes, we're working on a similar concept. Now, by resolving the adjustment, you also need to select a visually appropriate weight to ensure that the font displays the desired effect at various sizes and resolutions. Font vision also varies with font size and resolution. That's why Mac, IPAD1/2, and the IA writer on the ipad are displayed in different ratings. To clearly explain the logic behind the "Hierarchical digital font" and the idea behind our website, I need more time and space, so please wait for part II

Reaction to the current position

Although there is no social media button, but this article has been a lot of reprinted, little Criticism of the point, mainly around the fluid level and adaptive level of the problem, for this question, I would like to put it behind. I expressed surprise when I heard Joshua Porter such comments:

@IA until I see "Interactive design is engineering", I am more confused. How does this work?

As many others would like to know, the whole quote is: "When you design a screen, not everything works as you expect." Interactive design is engineering: It's not about finding the perfect design, it's looking for the perfect compromise. "Usually I would say," Web design is engineering: It's not about finding perfection, it's finding the best compromise. The phrase "web design" would be a little more clear, because the design has many obvious technical implications. The reason I use "interactive design" is because I use the app in these examples.

This means that when graphic design requires and allows you to have a great degree of visual control, and Web design requires you to think about visual design and technology compromise in order to get the perfect result, you need to explore a lot of different resolutions and find the best compromise in all the suboptimal choices with each of your own pros and cons.

At this point, graphic designers often interrupt you and try to prove that they also deal with a lot of technical problems. Of course, they were done. All art and design require technical knowledge. But there is a difference between designing a car engine and designing a website, and designing a website and a magazine and designing a website. This difference is related to the degree of engineering.

In conclusion, this means that many of the things we think about during the design of Web sites and apps are about compromise and trying to find solutions that don't have too many flaws. This allows many graphic designers to opt out because they are accustomed to having control. Khoi Vinh has more wonderful speeches about different points in the screen and graphic design.

Original address: Ia.net translation Address: Jianshu Translator: Arrietty