Talk to you about the 7 guidelines for mobile-side fonts!

When a line of sight is passing by, it is a leap forward, which we call a glance. You're not reading letters, not even words, but images of a part of the text, and the brain will fill in what it expects. If beyond the brain's expectation, it will prompt the eye back to verify that the hypothesis is correct. By creating a smooth visual flow between the lines, a good typeface greatly reduces the burden on the eyes.

For any font worker, there are inherent challenges to mobile devices: space is limited and ambient light is usually weak. However, by tweaking the techniques already used on the web side, we can improve the readability of mobile devices.

　　One, sufficient space

Contrary to popular belief, fonts are not the lines that line up on the screen; it is mainly about the space around and between each other.

The letter itself has a much smaller effect on the font than the space that makes it.

To understand this, it is helpful to know where the font comes from: the circular holes in the middle of the letter O (and B, C, p, and so on) are called "grooves." On the most primitive presses, the type is carved from metal, and these grooves come from the metal movable form carved and arranged in the plate. The first font designer is dealing with a mold that is not actually available for printing. The letter itself has a much smaller effect on the font than the space that makes it.

When it comes to hierarchies, we usually refer to H1 to P and sometimes to h6. But there is also a level that affects the line or paragraph of the visual flow, which is a special level: The letter spacing is less than the word spacing, the word spacing is less than the line spacing, and so on.

To create the best readability on the mobile side, pay particular attention to these special levels, and these gestalt words, lines, and paragraphs of text combinations are also critical in natural light.

　　Second, ruled

Ruled is the length of a line of text. Or, to be exact, the ideal length of a line of text, because it's hard to match each line exactly.

As we all know, the ideal ruled for comfortable reading is about 65 characters. The physical length produced by ruled depends on the design of the font, the spacing between words (see below), and the specific text you use. The 65 characters at the beginning of this article (see the original English version here), with the PT serif font is 26.875em wide, with open Sans is 28.4375em wide, with Ubuntu font is 27.3125em wide. If you add italics, capitalization, and a whole bunch of other font details, there's a bigger difference.

In desktop browsers, 65 characters are difficult to reach, but on a mobile device, 65 characters, if at least as large as you can see, exceed the bounds of the browser. So, on a mobile device, you have to reduce the line width.

There is no universally accepted line width standard for the mobile end. Traditionally, however, every narrow column in a newspaper or magazine tends to be 39 characters. Since the ideal ruled has been tested for centuries, it also works well on mobile-side fonts.

　　Third, loose spacing, compact line spacing

Line spacing is the space between lines, and the spacing is too tight, making it difficult to peek from the end of the line to the top of the line. Line spacing is too loose, the spacing begins to form queues, creating a river in our usual sense, blocking the visual flow of rows.

From left to right: ideal spacing, too tight, too loose.

The standard for line spacing is usually 1.4em, but in my experience, this is too compact for the screen: the fonts that perform well on the screen have a key feature-large grooves, larger grooves that require a larger number of line spacing to maintain the space level.

In turn, shorter line widths require smaller spacing. So you might want to set the spacing of the desktop side loose, and remember to set the moving end more tightly.

　　Iv. finding the best state

All fonts have at least one of the best states, showing the best size on the screen and the anti-aliasing option that best retains the glyph in the browser.

Best of all, most strokes can usually be arranged in a pixel grid--the pixel font, which, if you remember, will only work if the font size is adjusted to its best state.

Setting the font to the best state can create a stronger contrast. When designed for mobile ends, comparisons are especially important because the glare from the outdoors can be distracting.

You'll find that fine-tuning the line spacing will make each row break out of perfect pixel matching. I think the importance of contrast is better than line spacing on a mobile device screen. So if you have to compromise on line spacing to keep each row fit with the pixel grid, then do it.

Usually the designer arranges text through the baseline grid. But on the mobile device, we need to use the x height instead (x height as the name implies, the height of the lowercase letter x). From the study of legibility, we know that the brain recognizes the top of the text, not the bottom. So to achieve a smoother visual flow, we want to make sure that the top of the character fits the pixel grid best.

　　V. Don't overlook the ups and downs

The undulating edge is the edge of a piece of text. Most of the content you read is left-aligned (at least for Latin), causing uneven right edges.

When the line of sight jumps from the end to the next line, the brain is best able to determine the angle and distance of the next jump. Think of each jump as a run over the springboard, if the spacing is consistent, it will be much faster. As a result, the left edge of the text should be flat, with each line starting from the same place (for the right to left language, exactly the opposite).

So you should never center the text above two or three lines.

Usually the text is set to justified, which means that each line of text occupies equal space, so there are no bumps on either side. I suspect that both ends of the popular and responsive design, it teaches designers to think in a blocky form. Both ends of the text produced by the white is not uniform. The worst case can result in a line with only a few words, rather uncoordinated. Narrower ruled can exacerbate the alignment problem, so justified text is hard to read on the moving end.

Left to right: Align Left, center, and justify.

If neatness is really important, use a hyphen to make the undulating edges smoother and never use justify on the mobile side.

On the right side of the text there is an additional benefit on the mobile side: People often read text on a distracting occasion, and readers often move away from the text--check the station name, or answer the phone. The undulating edges create a random shape, allowing the right-handed sight to go back to where it was just by rereading the least text.

　　VI. Reducing the contrast

To enhance the contrast between text and background, we also want to reduce the contrast between different levels of text.

At the mobile end, the actual visible text is less, so the contrast is magnified.

The reason is that our brains judge importance based on the environment. On the desktop side, the title may be twice times or even three times times the body size, because there is more text on the screen, so this is valid. At the mobile end, the actual visible text is less, so the contrast is magnified.

Most designers use the combination of the size of the Fibonacci sequence. At the mobile end, the ratio should be narrowed to reduce the contrast between the font sizes. For example, if you use the gold ratio 1.618 to multiply the font size. At the mobile end, the 1.382来 should be replaced with a smaller ratio.

The desktop side screen allows for more exaggerated font size scaling than the mobile end.

　　Seven, adjust word spacing proportionally

To adjust the font size for the mobile end, we need to be aware of the necessary changes in word spacing.

(First of all, you should not adjust the intrinsic kerning.) The intrinsic kerning is the distance between two letters, making their spacing visually consistent with other letter spacing. When authoring fonts, it takes into account the inherent kerning, which can take months. If you choose a professional font, its inherent kerning is appropriate, if you feel wrong, please change a font. )

Word spacing is not a natural kerning. Word spacing is the spacing that is applied to all characters in the font. Usually you should also not adjust the word spacing.

The big font is an exception, with the title and small text (such as footnotes) for example. Large text needs to reduce word spacing, small text need to increase word spacing. The former is considered to be grouped, while the latter is to enhance contrast. If you're adjusting the title, or using the art font with the usual word spacing, you might want to zoom out a little.

　　Summarize

The font is a craft, the designer has been meticulously polished throughout his life. That's true, because every word, every font, and every technology poses new challenges. There is no universal law of invariable.

If you pursue legibility, keep in mind three principles: the line of visual flow to be smooth, the space level should be clear, to have enough contrast. This is especially true for mobile-end pages.

There is no rule that cannot be shaken, it is all in your eyes. The guide to this article, however, serves as an ideal starting point for arranging text gracefully on your mobile device.