Good typography recipes

Judging by the results of the vote , which I conducted in my blog, the majority of users do not type the texts before publication (UFO does not count). Those who work on the texts, most of them do it manually, so I decided to try to put together screen typography recipes, so as not to forget myself and remind others. I don’t think that the article will be something new for experienced web designers. Beginners will learn, pros will fix :)

Content

1. Hyphens, dashes, minuses and other sticks
2. Quotes and lines
3. Parentheses
4. Dots
5. Headers, Lists

First of all, I want to remind you that the typography of the text is based on the national standards of the site’s audience (and not the language used). For example, it is recommended to use the rules of Russian typography on the site of the club of Russian Americans, even if all the texts are written in English. Also, do not forget about the appearance of the text: sometimes it is better to sacrifice the rules in order for the text to look really nice (as concerns, first of all, a long dash).

For some reason, the <cd>…</cd> tag does not work, so I recommend typing all character codes manually, rather than copying from text.
')

1. Hyphens, dashes, minuses and other sticks

The hyphen (-) is a U + 2010 character ( ߚ in HTML).

Right	Wrong
Some who Anything Light gray Nicotinamide adenine dinucleotide phosphate (it is preferable to write the names of chemical substances like this: nicotinamide adenine dinucleotide phosphate) You-Know-Who	Somebody (by whitespace) Light gray (another, similar in mark)

Words with a hyphen are not broken, since these are not two different words, but one, most often with two roots. The dash of a particle - or - , - , -, something , something.

The digital line (figure dash, -) - is used to separate numbers in telephone numbers. In essence, this is not a minus, because There are no mathematical operations in the telephone number. This is a U + 2012 character ( ߜ in HTML).

Correct writing of phone numbers:

Local numbers	With city code	With country and city code	Cell phones
123‒45‒67 12‒34‒56 1‒23‒45 12‒34	(123) 123‒45‒67 (1234) 12‒34‒56 (12345) 1‒23‒45 (123456) 12‒34	+7 123 123‒45‒67 +7 (123) 123‒45‒67	8 123 456‒78‒90

Misuse:

• 123–45–67 (using dashes or other similar characters)
• 123 45 67 (use of spaces)
• 123 - 45 - 67 (beating with spaces)

Also, the operator code in the mobile phone number cannot be bracketed: 8 (987) 123‒45‒67

The hyphen (soft hyphen, &sh; in HTML) - placed in words between syllables, is displayed only if the word falls on the end of the line. This symbol is recommended to break long words that may not fit in the end of the line, as well as chemical components.

Example:

• en &sh; cyc &sh; lo &sh; ne &sh; diya
• nicotine &sh; amide &sh; adenine &sh; dinoscleotide phos &sh; veil

A short dash (-, en dash, a dash wide with the letter “n”, &ndsh; ) and a long dash (-, em dash, a dash wide with the letter “M”, &mdsh; ) are known to all. I will only note that in Russian typography it is recommended to use only a long dash.

Related article: Dashes: Is there only a dash, minus and a hyphen?

2. Quotes and dashes

The quotation mark (", U + 0022,  in HTML) - in Unicode has the name" QUOTATION MARK ". It is not a quotation mark, no inch sign, no sign of arc seconds. It is used in programming. It is allowed to use only if it is not possible to replace it with another sign. Accordingly, any use in the text is erroneous.

Apostrophe (', U + 0027,  in HTML) is not really an apostrophe, in Unicode it has the name “APOSTROPHE”, but its use in the text is also not recommended. This sign is not a foot sign or sign of angular minutes. Used in programming.

UPD: Thanks to Qbit Hubrauser for detailed help:

> Why is a quote not a quote, and an apostrophe is not an apostrophe?

For historical reasons. At the time of teletypes, the encodings were small, the keyboard layouts were poor. The same character replaced the opening English double quote, closing the English double quote, inches, etc. When switching to Unicode, backward compatibility was not broken, and the key next to Enter still prints this “average” symbol. And for the correct signs entered independent code points. The popularity of the old “artificial” under-character is due to the fact that it is on the keyboard layout, but the correct characters are not. Therefore, in everyday life (in ICQ, in posts, in SMS) a “programmer quote” is used. But serious typography should take into account the differences between these signs - both the difference in semantics and in appearance.

For example, in the Times New Roman headset, these characters have completely different styles:
opening English double quote: "two-six-top"
Closing English double quote: "two-nine-top"
inches: two oblique lines in the form of a wedge
“Programmer quotation mark”: two straight wedges, thickened from above.

French quotes (“Christmas trees”, U + 00AB and U + 00BB, &lqu; and &rqu; in HTML) are traditional quotes in Russian typography.

Right	Wrong
The book "Dead Souls" Educational institution "Education Center" Zvezdochka " Fat cat loved to say: "Guys, let's live together!"	Book of Dead Souls Book of Dead Souls Educational institution "Education Center" Zvezdochka "" Fat cat loved to say: "Guys, let's live together!"

German quotes (paws, U + 201E and U + 201C, &bdqu; and &ldqu; in HTML) are traditional nested quotes, or quotation marks of the second pattern.

Right	Wrong
Research Institute "RNC" RusAtom ""	Research Institute "RNC" RusAtom ""

English single quotes ('Marrow', U + 2018 and U + 2019, &lsqu; and &rsqu; in HTML) are used by philologists in compiling dictionaries (as practice shows, they are not always used). In ordinary texts are not used.

Right:

• From the Latin appellatio 'message'
• With the word 'village' does not lean

Apostrophe (', U + 2019, &rsqu; in HTML) - English single closing quote. Most often used in foreign names and extensions.

Right	Wrong
D'Artagnan, Sarah O'Connor Intel processor	D'Artagnan, Sarah O'Connor Intel processor

Accent, accent (´, U + 0301, &ut; in HTML) - is used only in cases where the meaning of the word depends on the accent. Also used with any words in the book. The character is placed after the stressed vowel.

Example:

• The river is narrower. Most of.

UPD: Verdana fonts poorly handle accent marks, but in version 5.01, a bug with an acute fix has been fixed. If you see the stress mark not on the stressed vowel, refresh the font. You can download the whole or upgrade for Win .

The signs of minute and second, feet and inches (′ and ″, U + 2032 and U + 2033, &rim; and &rim; in HTML) are used only for angular minutes and seconds, in Russian typography it is recommended to designate feet and inches in words.

Right	Wrong
59 ° 57 ′ 00 ″	59 ° 57 '00 "

Related article: Strokes, strokes and strokes

3. Brackets

The brackets, thank God, are not divided into typographical and programmer ones. But even here there were some rules:

• There are no spaces after the opening and before the closing parentheses.
• Punctuation marks are placed after the brackets, with only a dash separated by a space.
• The brackets cannot be at the beginning of a sentence, except when the sentence has ended in front of the brackets. In this case, a dot is placed after the parentheses. Exception: in the design of the play to describe the states of the characters brackets can be at the beginning of a sentence, but after the actor is specified.
• If the outline of the text changes inside the brackets, then the outline of the brackets themselves remains unchanged.

Right	Wrong
Today it was snowing in Moscow (in the morning). The river overflowed (forever). Rabbits (such animals) are not only valuable fur ... The river overflowed. (This year there was a record rainfall.) CAT: ( carefully ) Anya, what are you thinking?	Today it was snowing in Moscow (in the morning). Rabbits (such animals) are not only valuable fur ... (This year there was a record rainfall). CAT: (carefully) Anya, what are you thinking?

4. Dots

There is an excellent article: “Is everything so simple with dots?” . There are a lot of rules and examples of use, and in this article they are sufficiently covered. The most important thing: use the ellipsis instead of three points in a row. The usual point in almost all fonts is made fatter and larger than the points in the exclamation point or question mark. Therefore, three points compared with ellipsis look dirty and sloppy.

5. Headers, lists

5.1. Headlines

There are several rules for the design of headings:

• The title should stand out from the main text.
• There must be a clear hierarchy: the font of the main title is larger than the font of any nested
• Headers cannot be underlined if they are not links.

Right	Wrong
Top header Subtitle Main text.	Top Header. Subtitle. Main text.

5.2. Lists

Anyway, bulleted lists entered our life, and began to appear not only on computer screens, but also in printed products. Therefore, it is not necessary to prevaricate and say that “there are no bullets in Russian typography”. Previously, there was, but now - there is. And we have witnessed this penetration. To make a beautiful bulleted list, you should follow these guidelines:

• Hierarchy must be respected in any list. To do this, a tab character is added before each line of the nested list and the bullet or numbering method is changed.
• The initial marker or numbering symbol can be any character.
• If the list is a continuation of an unfinished sentence, where each line is an alternative ending, then a semicolon is inserted at the end of the line.
• If the line of the list is an independent sentence, then a period is put at the end.
• If the line of the list consists of a set of characters not combined into a sentence, or words combined into a phrase, the sign is not put at the end of the line.
• A dot is put in the numbered list after each number or letter of the marker, regardless of the level of nesting.

Habr offers only one type of numbered list and one type of bulleted. Even in this situation, it is possible to achieve the correct construction of nested lists by mixing them:

Lorem Ipsum Dolor Sit Amet

Lorem Ipsum Dolor Sit Amet

In addition to the usual markers of circles and squares, there is a so-called “line bullet”: ߻ , "⁃". In general, there is no definite rule, what should be a marker, so you can even put a picture.

Conclusion

So, the review of the basic recipes of competent text layout has come to an end. Typography, of course, is not limited to this. I hope that all the information in one place will save you time and nerves.

Beautiful lyrics to you :)