Design for Reading

With a growing number of Web fonts, paid Web font services, and off-the-shelf tools, typography takes back its title as the Queen of Design and is the key to all graphics and web design.

Today, many designers in the design of typesetting, the main consideration is essentially aesthetic issues. The problem is that we are used to treating typography and font design as two interchangeable terms, but actually they are different. Take a quick look at the label "typography" on the dribbble and see the trend immediately.

The temptation to use font design perfectly will affect the way we look at fonts, boy, I can even spend a couple of hours looking at the font design mix! Because both font layout and font design have a common visual concept. If we are always looking for beautiful fonts, this habit will keep us away from the real characters and features of fonts, such as versatility, reusability, and flexible design patterns.

We are always eager to try the latest OpenType font features, using free ligatures to beautify our design, and the desire to rely on CSS hyphen attributes supported by only a subset of browsers to achieve this effect. When we look at our masterpiece with pride, we do not realize that no one will care about it, even the talent of the typography! It was then that we realized the fact that words made it possible for ordinary people to read and understand on different devices, whether it was on a retina-screen tablet, on an XP computer or on a smartphone.

"Good typography doesn't necessarily make a typesetting maniac enjoyable, but it makes reading smoother," he said. ”

--oliver Reichenstein

Most of the articles on the web are focused on instant content, does it sound like a "reverse pyramid"? In the network environment information exchange quickly, so can adapt to the reader focus for a short period of time. People visit websites and applications primarily to find useful information rather than to achieve pleasure in reading. Don't get me wrong: I also like the title and column of the creative typography that captures my attention, but at the same time we can't ignore the need to sort out the balance and the readability of the text. Let's get started!

1) First of all say important: Project Research

Only by having the elegant writing and the readable articles from the reading experience can the readers digest the best. As in other areas of design, we need to do some research before doing anything. In the process of studying user habits, we not only need to find useful data, but also from the reader's thinking to consider the problem, the focus from our biggest enemy to move away-our ego expansion (I also always fight with it).

You should be aware of that. The main elements of the electronic reading experience are content, environment and users. You may be involved with these 3 elements in every project, but if you have the effect of typesetting on every element, you will find very intimate thoughts and actions that will eventually lead to a great improvement in the overall reading experience.

content

The best way to start a typesetting design project is to start reading. Every designer should know who the content is for and how it needs to be propagated. But in addition to evaluating content quality and listing framework elements, we also need to assess their understanding, reading time, purpose, and reading life.

covers all typesetting design elements

In the process of reading, think about the structures or elements you encounter and list them. This list can be booted as a simple style at the beginning. In addition to common paragraphs, headings, attachments, and so on, you also encounter some unusual elements, such as emphasizing paragraphs, referencing paragraphs, emphasizing reference paragraphs, and elements that are very important now, such as data tables and chart titles. You need to have enough fonts to cover these elements.

In a plain text link, make sure that the design overrides all HTML elements. You can then build some sample HTML and CSS files and save them as project-typogra-phy.html, which contains the elements and rules you need. This HTML file will be the basis of the layout system for this project, and it can be used sooner or later when you design a responsive view.

Evaluate reading time

Reading speed varies from person to person, and most adults read at 200-250 words per minute. This way we can easily calculate the reading speed by dividing the text count of the entire article by 250. If your project has a sample article, you can put it in a locally installed content management system and run a script to estimate reading time.

Estimating reading time can help us design the spacing and grasp the reading rhythm. If the reading time is too long, we can divide the article into small paragraphs, or set a striking citation at the key point.

evaluation of readability and legibility

Many articles have a reading level and it is important to know these standards. For example, if an article is complicated, you can introduce some comments to make the reader understand the article, or add some footnotes.

If you work with an original author to modify content and typography, some tools can make it easier to distinguish between different versions.

One of the evaluations is the automatic readability index (API). The API focuses on the number of words and sentences to play an important role in real-time monitoring. Flesch–kincaid difficulty coefficient measurement is to test on the other hand, more focus on the byte, can deal with a large number of intensive tasks in real time.

Another useful test is the Flesch readability test. It's measured by words, sentences, and bytes, and scoring results can tell you the difficulty of this article. Most languages have their own translations. Although the tool is unfamiliar with web design, publishers and government agencies have been using it for many years, primarily to assess reading levels for different readings.

Every article is a very maddening thing to test for readability scores, so I recommend using the handy article readable statistics tool, a PHP scripting tool that we developed when we were doing creative nights.

content strategy, information architecture and microfilm

If we jump out of the topic of typesetting for a moment, take a look at the content strategy (planning, mastering the content and defining the rules of the editing process) and the information architecture (the rules for organizing and describing the content) to engage in a discussion of potential topics.

Considering the lifecycle of content can prevent us from rushing to typesetting this new trend. The next time you publish a new article, you'll be able to prevent the editor from getting angry because it doesn't clear the residue style that was prepared for the next redesign.

Category labels--determined by the information architecture--can make web designers miserable because there are limits to the space in the navigation bar or column. I'm betting that in every designer's career, it's always a case of trying to focus on naming or shortening the category name, just to accommodate the available space. Of course, we often reduce the font size or choose another font, but if all methods fail, we can look at the information architecture to find the final solution.

In addition to articles, we must also have some form labels, instructions, small notes, interactive elements such as buttons and links, and other text of different functions. All of these dots are called miniatures, which are fundamental components of effective interaction design.

Environmental

The Network standard protocol development is swift and violent, designer's website and "One network" the ideal country ties more and more closely, no matter where anyone can see the website which oneself designs. While it is difficult to achieve the goal of such widespread transmission, mobile phones do not mean browsing the web on smartphones only.

Software problems

Windows system users see fonts that are processed by a clear font rendering engine. The problem is that fine-tuning takes time, and not all fonts are perfectly rendered. So the browser that tests the window system becomes a regular task.

Screenshots are 16px font size Verdana, Proxima Nova, Arial, Adelle Sans and Georgia fonts (Proxima 18px) on the Windows 7 system firefox18 effect. Proxima and Adelle are rendered as Web page fonts, and other fonts are suspected to be just the default fonts on the OS system. The first 5 lines of fonts have not been processed by the clear font rendering engine.

Of course, remember that different Web font services may give you slightly different fonts. One type of font provided by one service may work well, but the provision of another service seems to be just so-so. I guess the reason may be due to a lack of time investment-fonts do not have enough time to complete the rendering, or perhaps because of the lack of font rendering experts.

Fortunately, the Web font service has been improving the quality of the font, I believe that the last person on the computer's font will become beautiful. Because a lot of work is required to maintain the right font, I encourage you to buy some fonts and subscribe to the paid web hosting program, which can push the pace of font rendering optimization.

If supporting window users is a difficult task for you then think about manual trimmer fonts, such as TheSans Office, From Lucasfonts (known for their obsession with font-rendering optimization) or a large number of fonts designed for Microsoft Office applications (their names usually include "Com", "OFFC" or "Office"). If you want to use a special font for the old window system, use the tested and validated Arial, Georgia, and Verdana fonts.

If you want to know more about font rendering, read Tim Ahrens's carefully scanned font rendering.

Hardware Problems

The problem we have to face in this industry is the diversity of resolutions. Therefore, typesetting design is not useless. An interesting solution is to use hierarchical fonts to solve different resolution problems, just as print designers use grade fonts to control the effect of ink on paper. To learn more about this method, read the new Web page under the response design of Oliver Reichenstein.

The same glyph will have different rendering effects under the same manufacturer's device. Screenshots show the effect of 16px Adelle fonts on the iphone 3G, IPad3 and iphone rendering. Screenshot of a webpage and enlarge in PS.

Another example is about electronic screen billboards and TV screen typesetting, which often require thicker font and thicker contrast. So, you're going to skip over two levels of bold, and just add bold regular fonts. It is not enough to preview this effect on a tablet device on a computer or Retina screen. As with the design on the phone, we need to test on the real machine.

interface Type

The software and hardware factors are eliminated first, and the environment means the type of interface. For example, in electronic devices to content-driven portal sites, magazines, novels and textbooks, the various patterns must be structured clearly, each have their own relationship, forming a linear reading path. Content-driven site titles are diverse (even for niche sites), and a story needs to be introduced to help readers understand them. (Remember the comments section below?) ）

On the contrary, the information used in Web applications is straightforward, simple and based on facts, with a variety of contrasting items and data, all of which are within a specific time period. Unlike the linear structure of the sentence, the application of small pieces of text can be individually understood and easy to understand. We can let the reader random skip reading also has no effect.

In network applications, the context of content is predictable. Many typical examples are looking at sales data, analyzing Web site data in tables, charts, editing dates, and time related records, and you can also check online emails to see if you are the winner of the Nigerian Royal Lottery.

User

Everyone on the Internet is our target user, especially when we are developing a multi-language system. If a button is only enough to "return" the position of the English alphabet, then the French "retour", Chinese "back", German "zurück", Croatian "Povratak" may not be appropriate.

the problem of readability

Dyslexia is a kind of impairment of human reading ability. For example, a person with dyslexia would think of a character as a picture or an inverted character. So, a lowercase "a" with a small tail is like an oblique "e" to a person with dyslexia.

In addition, geometric fonts are difficult to read because they are similar in structure and shape to those with dyslexia. The P mirror looks just like q,n. The idea here is not that we need to change it to a specific font right away, but we realize that this kind of problem can reflect the designer's ability to read and write.

To complicate the problem, dyslexia has one-fourth probability and occurs with attention deficit disorder.

Bold to make the letter in the right place. This shows Futura and dyslexic fonts.

Screen font smoothing thanks to red, green, and blue subpixel pixels. Unfortunately, for a small number of men, some of the fonts appear to be more sharp and illegible, or lighter in color and fatter in shape, because the red sub-pixel is not obvious enough. Using color Oracle This free tool makes it easy to see how the fonts you choose are visually impaired.

Different color visual effects have different effects on the processing of font smoothing.

2 Select a font that is larger than the form

Unlike mainstream thinking, finding the perfect font at a glance is not an innate gift. Of course, talent gives you a natural advantage, but it's a bit of an advantage. Allow yourself to learn the items on hand, and the ability to identify the right fonts will follow, reducing the fonts you want to select.

Said Han off. Many teachers and instructors have written articles that depend on the environment, looks and feelings to choose the right font. A brand name and its competitor's design environment, emotional and visual differences are completely different as a designer's responsibility. A typesetting designer, or a typesetting worker, looks at actual needs, project objectives, and derivative issues from different perspectives. Every aspect needs a successful, comprehensive project.

These goals are so different that we should be cautious about using font combinations and abstract adjectives such as "beautiful" or even the less vivid words "beautiful" without context. A font can only be examined in the context of a particular environment. If we look at a single font individually, we will certainly look at it from a very strict technical level.

When I saw Comic Sans was used in the invitation letter to the Kindergarten party, the first thing I was roll. But at some point I have to admit that it is appropriate for my children and friends, although I do not encourage them to be used everywhere. But if I see a corporate memo with comic Sans, I'll freak out.

with serif and sans serif fonts

Many beginners hesitate between having a line and sans serif fonts. In fact, this depends on the circumstances, and should never be influenced by the personal preferences of the typesetting master or his or her customers. And there is no difference between the two fonts in legibility, especially in this age of high density screens.

Sometimes some projects allow us to take shortcuts. If we prepare well beforehand, we can make a wise decision. If we want to show vertical data (such as exchange rate or product price list), then the serif font will be more appropriate, because there are serif fonts usually in the horizontal direction of the emphasis. Because the serif font can enhance the flow of text in the horizontal direction more suitable, so it is more suitable for linear thinking or lack of vertical space.

In fact, we all know, but often forget to take a step back to see the whole. I love Vitaly Friedman and Elliot Jay stocks decided to use sans serif in the text of the Smashing magazine. After a bird's-eye view of the entire page and its layout, they concluded:

"Because there's a lot of visual content on Smashing magazine-screenshots, buttons and flashy ads-the main body uses serif to look smarter and neater." ”

--vitaly Friedman and Elliot Jay Stocks

Letter Readable

Another important readability test is to differentiate between simple font glyphs. Designers use a full letter phrase, or test phrases to evaluate and contrast fonts. For example, the famous phrase "The quick brown fox jumps over the lazy dog", "handgloves", "Hamburgefonstiv".

Designer Jon Tan came up with the phrase "aegh! IIL1 0O "has been in use for a long time. This phrase effectively obtains the character of a font and can check the difference between the letter "I" "I" "L" "1" "O" "O".

We can extend this phrase to include italics, small caps, and numbers. For example, we can add a italic "E", just to make sure it doesn't look like a deformed lowercase "a", especially if the font size is small and the details are lost.

Foreign Affairs

It is necessary to support international visitors. If you're building a whole station with a language you're unfamiliar with (such as Arabic or Vietnamese), you may need a local printer to teach you one-on-one. But most web designers will build their own database of international users, we must also ensure that each character in this font can be normal display, the font in English and Spanish is the most widely used. Each language has one or two specific critical combinations.

It is rarely seen in the Yugoslav language that there are "GY" combinations in the Croatian dialect in the Hungarian language, not to mention two words ("ch" "dž" "ij" "LJ" "Ty") and three-character ("DZs" and "sch") these combinations.

Amazingly, in the Italian alphabet, the letters "K" "J" "W" "X" and "Y" are used only to accommodate foreign languages, and some are very colloquial, such as "K" as an emphasis on "C" use. So when I was robbing a guy in Italy, he yelled at me. Back to the point, because the alphabet reduced so many letters, resulting in a lot of "CC" "ll" "TT" and ZZ, and with "O" and "I" combination of letters. You can create some awkward spacing like these combinations.

In south-Eastern Europe, surnames often end in "č" or "ć", and no one likes their names to be stripped of their pronounced letters, and, worse, to render them in a reserved font. Denmark and Norway use "O", and Germany uses "ß", which exist only in the Latin alphabet.

Recognize the letter and letter combinations in your target voice

To cover all the extended Latin alphabet, we certainly need to choose a font that can cover all the Central European letters (such as paid fonts). To prevent the combination of letters in the rare languages mentioned above, we need to prepare some candidate fonts to support these special languages, because in typesetting, word spacing is unlikely to be completely adjusted by CSS.

familiar fonts allow us to read more smoothly, but unfamiliar fonts can make us learn better.

We believe that when you face familiar fonts, reading is the most smooth. (PDF, 11.5MB) Even experts like Zuzana Licko and Erik Spiekermann also say that reading the most frequently contacted font is the most fluent. Look at the history of the fonts you are considering and compare them to the fonts that are most commonly used by the target audience.

The Skolar font, designed by David Brezina, was originally designed for academic and multilingual publications. People are accustomed to seeing new Roman fonts when reading this kind of publications. and Skolar fresh and trendy at the same time, in the appearance and the new Roman font has enough similar characteristics, so the new Roman font of the user community can also be well received. It is a good choice to follow this direction. But be sure to try different alternative fonts and experiment with which one will attract your target audience.

Replace times and new Roman fonts with Skolar? Can you tell the difference between the two times ' fonts?

Recent Diemand-yauman, Daniel M. Oppenheimer and Erikka B. Vaughan on "The impact of impaired reading on educational outcomes" (PDF 1.3MB) found that information presented in difficult-reading fonts is more memorable. Research has shown that reading barriers inspire deep information processing that can make memory better behaved. But it just tells us that it's OK to replace the existing popular fonts with other fonts, and it doesn't mean you have to choose the most bizarre fonts in the world to make reading more difficult.

3 Displays font

in the age of the response layout

Now the network can again see the narrow black body, singular style and a special font used to decorate. These fonts are not only bold, they add a variety of styles, but they also have the ability to catch people's eyeballs, just like the chapter nodes in the catchy headers and lengthy articles. Suggestions for formatting are not covered in this chapter, because the title of the page is often used to attract access to search engine optimization, which is a bit different from the function of the title in traditional printing materials. But let's look at the potential pitfalls of setting the title in a Web environment that is never static.

If you ignore changes in screen orientation and screen resolution, the top skyline of multiple words (for example, elongated sans serif fonts) should be able to do a good job on a node with a horizontal computer desktop size, but it may take up too much vertical space in the smartphone's direct direction. In particular, the title of the original line should be turned into two lines on the smart machine. Although the adjustment of small font size to have some effect, but the effect may not be better than in the desktop computer text clear.

Versa。 If we first for the mobile phone to do font design, the small screen on the phone the effect of outstanding eye-catching title directly to the computer may be too prominent and affect the overall effect.

In the case of more valuable vertical space, long fonts are a better choice than extended small fonts. When the extended font is too small, it usually has a good effect with the corresponding long font substitution.

The title is not clear enough on the phone with a line of Gothic characters. Set multiple rows of headings and take up too much vertical space

Application of Nimbus long non-liner font and Nimbus extended non-liner font

4 Combination Font

The combination of fonts is designed to highlight the tension in the design, causing interest to others. But in many cases, once the reader has entered the reading, the good order and the structure of the article plus the beautiful glyphs can increase the smoothness of the reading, especially under the low-resolution screen, but the nuances of the font are less obvious. If it is not necessary, please do not use the combination of different fonts too casually, this is the last pertinent suggestion.

According to experience, in order to avoid typesetting disaster, the combination of fonts to consider the appropriate row height. Comparing the row heights of different fonts with the same font size is an experiment that detects whether these fonts can coexist. Remember that Web typography is timeless. Keeping typesetting in harmony is not a simple task, and elements of the same baseline need different font sizes to offset the inappropriate row heights.

Aller and Minion Pro,georgia,adelle font combinations. Note Minion Pro and Georgia additional adjustments to accommodate row heights

5 The safest way to

Following the relationship between fonts and the user's own common sense is that combining fonts is the easiest way to do it.

A larger font system can be combined with other fonts on any axis in the system, such as weight, width, and glyph. So it's much easier to use fonts in the same family. Look at extended fonts or large family fonts that contain general, italic, bold, and bold italic fonts. Extended fonts contain all axes from thin to thick or even multiple widths. The large family font, also known as the font system, is more than the extended font contains a line and serif fonts, as well as text, special printing fonts, graded fonts.

In fact, there is no need to care about the exact classification, because different words are not always consistent in the classification, and extended font and font system between the line is not obvious. For example, some collections contain sans and serif fonts of different thicknesses without distinction of width. Remember, although most font families have only a limited base font, the diversity of only a few dozens of font families can meet the needs of typesetting and printing. (These dozens of kinds of fonts in the hundreds of today, only accounted for a small proportion.) If you have difficulty combining fonts, it's a good choice to start with a variety of collections.

JAF Bernino Sans have different thicknesses and widths. The faded letters are not really italic, and are called Italic Roman fonts. Some browsers can make fonts italic when they write quickly with CSS. However, the pseudo italic is often seen as a font that violates typesetting rules.

Different fonts designed by the same designer are usually better combined because they have the same genes in proportions, shapes, gestures, and angles. Let's cite a few examples, Jos Buivenga, Veronika

Burian, Matthew Carter, Nikolađurek, Adrian Frutiger, Jose Scaglione, Mark Simonson and Erik Spiekermann. These are all my favorite designers, and you can try to discern their signatures.

The last method is to combine the fonts of the same character system, because the same character system can usually provide a combination of fonts. As experienced designers and typography say, smart designers subscribe to typography-related newsletters, often with a large number of recognized and reused combinations of fonts. Over and over, your newsletter folder becomes a file that can be used for reference, which is a bonus.

If you want to continue to study your fonts, create a little more contrast between fonts that has reached a comfortable balance. Also avoid conflicting fonts, or create clutter and affect reading. However, if two fonts are too similar, readers may find it tedious to see the difference. Combining two weights (such as general and semi bold, or bold and bold fonts) should not be inertia unless you know what you want to achieve.

Like cooking, start with a simple meal ready to eat, and gradually learn how to poison the dead. You can put the cookbook back on the shelves and start using strange spices to build your own cooking program. If you need actual examples, here are a few useful articles:

• "Best practices of combining typefaces," Douglas Bonneville

• "' What Font Should I use? ': Hep Principles for choosing and Using

Typefaces, "Dan Mayer.

• "How to Choose a typeface," Douglas Bonneville

6) Edit PostScript

Printed and decorative fonts only apply to fragments, such as headings and eye-catching citations, because they can set the tone and break the lengthy repetition (remember the reading time assessment mentioned above?). ）。 Text fonts focus on practicality and are suitable for lengthy reading. After reading for a while, it's easy to get tired of burnout, especially when reading on technology products that are distracting, like networked computers.

"Designers like the calm gray tones, this pile of readers is a huge disaster." "-erik Spiekermann

Occasionally inserting a pause-type title or striking citation can help boost reading. Because the eye-catching citation highlights the important information of the article, it's better to display it in a special-printed font. The title is part of the article, so it's better to use a slightly different font than the text, such as uppercase (the original Sgt Caps is speculative). As previously said, this is only a sound method, not a rigid rule.

7 Everyone is responsible

In your decision should be influenced by two important factors. First, if the reader doesn't like your typography, they can change the settings in the application or in the customization options in the device. When readers change settings, they usually choose a more generic font, which in turn can be a drain on your efforts. In the past, when the absolute unit of line spacing was combined with the letters of relative units on IE, even a slight increase in the letter size was enough to mess up the page.

Second, there is no hinge on the page or a physical border is a double-edged sword. The advantage is that the text is basically unrestricted on the screen. The downside is that it can be difficult to design balanced typography because many times the top and bottom of the page can't be displayed at the same time. Therefore, editorial assistance is of great value in helping us to create a better reading experience. When readers pull down the scroll bar, they can't expect them to run like marathons until the end.

Don't make assumptions when designing for everyone. We have to accept the fact that our typography design will be displayed in a series of pixel densities on hardware devices. So we want to make sure that the text that is designed is as readable as possible, regardless of the changes in the reader's space, time, cognition, social status and physical condition. The strict rules of the past are gone, and it is our responsibility to understand the project as thoroughly as possible, then make informed decisions and establish solid design concepts.

(MARKO Dugonjić Sevenshao)

Source: http://mxd.tencent.com