Teach you 13 steps to create elegant Web fonts

The printed font is static, and the page font is sleek and malleable. Designers must anticipate the end result of Cross-browser and end-user, not just learn how to achieve a particular visual appearance. In addition to mastering the simple rules, they have to understand the reasons behind.

　　01 understand the use of fonts

The first priority is to check what fonts will be used. Basically all fonts are used similarly, but some fonts are more appropriate than others. Unicode-encoded fonts offer the possibility of thousands of glyphs, while the OpenType font format supports more features such as small caps, old style numbers, free ligatures, and contextual alternation.

However, the quality of the font depends on the level of creation of the font designer. If the designer ignores the need to draw all the necessary characters, or forget to create the relevant features, then the layout of the details of the problem will become less meaningful. Creating professional fonts takes a lot of time and effort, and some designers aren't ready enough.

Therefore, the task of checking the character set and features of a font before it is incorporated into the page design becomes important. Fonts are like the toolbox, and sometimes the toolbox is almost empty, the use is limited, just as the font is only uppercase, lowercase, numbers and some basic spelling; sometimes what is missing is some key tool, and if there is a screwdriver, a saw without a hammer, some nail work will be hard to complete.

　　02 Ingenious Word Sets

FF Sero by Jörg Hemker

Font rollback (fallbacks) occurs as a single character base. Once the character is lost in the specified font, the rollback system automatically calls this character from the next font in the list and then switches back to the original font. Flexible use of this feature can achieve amazing results. For example, the character set of a font does not have an old-style number, so you can find the font with the corresponding number, subtract the font, leave only the number you want, and put it in the rollback list. All the numbers in the text are rendered in an old-fashioned style, and the remainder is displayed in normal font. This allows you to not have to format the numbers separately, and also get rid of the extra HTML tags on the page.

　　03 figure out the numbers

Many professional-level fonts have several different numeric character sets. Each character set has its special purpose. Table-type numbers occupy the same space, allowing them to be arranged vertically, while the width scale numbers match their design – for example, the number 4 is much wider than 1. On the one hand, the design of the old-fashioned style figures mimics the lowercase characters with x-height attributes, ascending and descending letters, and blends them perfectly with uppercase and lowercase text. On the other hand, lined numbers are used for numeric values, or in conjunction with uppercase text.

　　04 Do not forge fonts

FF Ernestine by Nina Stoessinger

CSS allows you to forge some things. If the font itself does not have a bold variant,<b> label can be artificially bold with a double render + slightly sideways movement. Italic effects can be achieved by adding i> labels to fonts that do not have italic styles. The resulting distorted characters are appalling.

More importantly, avoid using <b> and <i> tags and replace them with <strong> and <em>. The former only involves the appearance of the font, which is called bold and italic. But maybe you just want to emphasize the text by changing the color and size. So it's important to be clear about your purpose-bold characters, or emphasis on content? Use the latter to give you the freedom to easily change the appearance of text through CSS files. In general, all text styles are defined in the CSS file, avoiding local style definitions wherever possible.

　　05 But if you have to fake it, be realistic.

When small caps are missing from the character set, forging them always makes them thinner than the surrounding fonts. If the font style has a half-bold variant, or the same thickness as normal and bold, you can use the thicker one to adjust the text's shading. Don't forget to give small caps a little extra character space.

　　06 carefully use copy and paste

Sometimes you will find illegible characters on the page where they should be accented or other special characters. This is the case when copying UTF-8 encoded text from a text-editing software. The character encoding system maps all glyphs to a given set of characters to facilitate transmission of data (mostly text or numbers) over a network or storage medium.

Although HTML can be compatible with UTF-8, it distorts text copied directly from other arbitrary coding systems, making it a strange combination of random letters and symbols. In addition, some content management systems replicate the text at the same time, creating unpredictable consequences. The best way to avoid this problem is to use a simple text editor to convert the copied content to a plain text format, and then copy and paste it from there to the CMS.

　　07 Learning HTML Entities

FF Spinoza by Max Phillips

Look at your keyboard – you may not realize how rich the available characters are. Many of them are defined by HTML entities, so it is necessary to memorize commonly used entities-for easy page layout. You can't use the lowercase x instead of the multiplication symbol, and the trademark symbol is more than just a simple capital T and a capital m, and a floating accent is no substitute for quotes.

　　08 the correct reference

When it comes to apostrophes, the correct form should be closed single quotes. One of the highlights of the immature example is the use of straight quotes, which are also called "dumb quotes" by the designer of the form. However, it is not enough to use the appropriate curly single or double quotes. Different languages have different quotes used in the form. For example, French quotes are triangular identifiers that point to the outside, while in German the direction of the quotes points to the outer side.

　　09 Understanding Dashes

Hyphens are used to connect contiguous words, or to cross lines of long words, and other uses. There are two other horizontal dashes: En dashes are generally half the length of em dashes. Usually we use it to indicate a closed range of values, to indicate a negative number, or to illustrate the connection between two things. Em dashes are general and font equal width, and are generally used to delimit the pause of an idea and form an independent entity embedded in a sentence. But its specific usage often leads to controversy. Some people use em dashes instead of en, although both should be used without contiguous whitespace, many font designers would rather add slender blanks to avoid them touching adjacent characters.

　　10 defining relationships, not absolute dimensions

One of the biggest advantages of web text is that it can be adjusted by the user. If the font is based on pixel definition, scaling a page may result in a relative size difference between different text styles, for example, the body size may be larger than the title font size. It is critical to define all text with EM relative to the standard body size. This ensures that all text in the Web page can produce a corresponding adjustment, respecting the relationship between different text sizes.

　　11 Control line Wrapping

FF Spinoza by Max Phillips

Zooming the browser window makes the text box spacious or crowded, and end users can also change the font size. This may make you think that line-shifting is difficult to control. But when you have a thorough understanding of the desired end result, certain aspects can be manipulated.

A newline occurs at the end of a paragraph surrounded by a P or div tag. In other cases, there is very little hope that the next word will start with a new line, so use caution

Label. The most common reason is to put 2 or more words together. nonbreaking spaces ensure that contiguous words are always on the same line. Unfortunately, the nonbreaking hyphen has not been defined as an HTML character entity. In addition, soft hyphens or discretionary hyphens should only appear when necessary, and they can be useful when the text columns are too crowded to split the overly long words.

　　12 Note spaces

Non-nonbreaking spaces (nbsp) are not the only whitespace characters available in HTML. Full-width spaces (em space) and font widths can form a perfect square separator. The width of the half-width space (en spaces) is its 1/2. The most useful in tabular text is digital spaces (figure space), and spaces with the same size as the numbers in the font, while punctuation spaces (punctuation space) are equal to the width of the dots and commas; thin spaces (thin space) It can be used between the point in the initials and the next letter, and the hair space can separate the long dash from the adjacent characters. There are 3 times times, 4 times times, 6 times times as many spaces per full-width width ...

For the reading experience, the spacing between the characters and the interior is as important as the character itself. The correct hierarchy is the word spacing < word spacing < line spacing. You should avoid adding spaces between letters, which can separate words and affect readability. Increasing the kerning only guarantees that text with a small font size will have an effect. In contrast, the display size often benefits from a tight arrangement, but also moderately.

Distributed alignment can have a detrimental effect on the appearance of text. When the text is aligned to the line width, the word spacing is enlarged and the length of the blank space is scattered across the lines. This makes the appearance of the text unbalanced, and some lines of text can even create unsightly intervals. Left-aligned/right is an easier to read arrangement.

In addition to kerning and word spacing, line spacing can affect readability. Overly crowded text lines make text difficult to distinguish. On the flip side, if the line spacing is too wide, it will be difficult for the reader to find the next line after each newline exactly.

　　13 further

These tips can help you create more granular Web fonts, but there are still a lot of things to learn. As you learn more about font principles and use them confidently, you will understand how to try and broaden your horizons. One of the authoritative tutorials in this field is the inside Paragraphs:typographic fundamentals, which was just released shortly, and the author is Cyrus Highsmith. This book and Robert Bringhurst's basic tutorial on the Elements of typographic Style, or Erik Spiekermann and E.M. Ginger ' s, is a stop stealing Sheep ; Find-How-Type works is a perfect match.