typography
Notes on typography, 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 a ligature — 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. For sound recordings, use the phonogram symbol ℗ instead of ©. The order matters not.
© A. N. Other
Copr. A. N. Other
Copyright – A. N. Other
abbreviations
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