typography
Notes on typography, mostly for English or English-related language contexts.
guidelines
- Set font size to ≥16px
- Set paragraph widths, i.e. measure, to ~45–80 characters
For apostrophes, both the typewriter (') and punctuation (’) variants are valid. Although I personally prefer the latter purely for style. Similarly, for quotation marks, curly (“”) over straight ("").
Side note: did you know <q> elements automatically set quotation marks according to the parent element’s language?
L’essentiel est invisible pour les yeux.
—Antoine de Saint-Exupéry
somewhat obscure
Here are some non–widely-used typographical symbols and elements. Doesn’t this page look eesome with all of these symbols—like an old countryside manor or a dusty grimoire?
- Dinkuses are used to divide text or sections, or for completely ornamental reasons. These can take the form of increased whitespace but symbols like three spaced asterisks or bullets in a row (∗ ∗ ∗), asterisms (⁂), or fleurons (❦) may be used as well. The HTML
<hr>tag represents a thematic break and could be used as a dinkus. - The numero sign (№) can be used to abbreviate the word “number(s),” e.g. № 42.
- Commonly used by lawyers, the section sign (§) is used to reference sections of a document like Article § A.
ligatures
I love ligatures. Wikipedia has a list of English words that may be spelled with them — færie, œuvre, etc. Archaic, but gorgeous.
Ꜳ ꜳ Æ æ Ꜵ ꜵ Ꜷ ꜷ Ꜹ ꜹ Ꜽ ꜽ Œ œ Ꝏ ꝏ Ꝡ ꝡ
dashes
| symbol | name | usage | e.g. |
|---|---|---|---|
| - | hyphen-minus | item marker in bullet lists | |
| commonly as dashes or minus signs | |||
| hyphenation of compound words | cold-blooded | ||
| ‒ | figure dash | telephone numbers | 123‒456‒7890 |
| – | en dash | item marker in bulleted lists | |
| range of values | 1–5, © –, – | ||
| relationships between two things | Bangkok–Tbilisi flight | ||
| compound adjectives where at least one element is an unhyphenated compound | non–solar-powered, San Francisco–based | ||
| — | em dash | item marker in bulleted lists | |
| can be used as an alternative to parentheses or colons | my favourite things—cats, art, and travel | ||
| quote attribution | I don’t know if you’ve ever noticed this, but first impressions are often entirely wrong.— |
There are also the two-em dash (⸺) and the three-em dash (⸻).
spaces
Spacing between italicised and non-italicised texts may be narrow in certain cases — usually when the italicised ends with a tall minuscule or majuscule — and can be remedied with either a thin space   or hair space  
| variation | |
|---|---|
| default | (portal) |
| hair space | ( portal ) |
| thin space | ( portal ) |
Hair space could also be used in variables with subscript and superscript elements.
| variation | ||
|---|---|---|
| default | zy | x8 |
| hair space | z y | x 8 |
Use non-breaking spaces between numbers and units to prevent or between words where potential line breaks could be awkward.
numbers
Speaking of numbers, in paragraphs:
- Use word forms of integers zero to nine
- Integers above nine may be written in either numeral or word form, e.g. 42 or forty-two
- Integers twenty-one to ninety-nine that aren’t multiples of ten are hyphenated
- Sentences shouldn’t start with a numeral
Rules for singular and plural nouns:
- Nouns following an unsigned digit 1 are singular, e.g. 1 cat
- Nouns following simple fractions are singular, e.g. 1/2 teaspoon
- Nouns following mixed numbers are plural, e.g. 2 1/2 teaspoons
- Nouns following other decimal numbers are plural, e.g. 0 cats, -1 degrees,
0.4 grams, 30 days
formats
Copyright notices should contain the word “copyright” expressed as a symbol, abbreviation, or word; the year of first publication or a range of years (often from first publication to the present year); and the owner’s name. Sound recordings use the phonogram symbol ℗ instead of ©. The order matters not.
© A. N. Other
Copr. A. N. Other
Copyright – A. N. Otherabbreviations
Abbreviations are shortened forms of words or phrases. Acronyms are the preferred term for abbreviations pronounced as words; in initialisms, letters are pronounced individually. Numeronyms are acronyms with numbers, e.g. a11y and i18n.
| type | example | |
|---|---|---|
| contraction | I’m | I am |
| titles | Dr. or Dr | Doctor |
| initialism | e.g. | exempli gratia |
| D.C. | District of Columbia | |
| HTML | HyperText Markup Language | |
| acronym | GIF | Graphics Interchange Format |
| lol | laughing out loud | |
| shortening | dino | dinosaur |
| hippo | hippopotamus | |
Rules regarding plural forms of abbreviations and the inclusion of periods vary and are debated, e.g. 1 g, 5 g, two GIFs.
resources and rabbit holes
- Links § Typography
- Address formats in different countries
- Wikipedia’s Manual of Style, especially § Formatting