typography
Notes on typography. These will generally apply to English or English-related language contexts as that is the primary language I use on this site.
guidelines
- Set font size to a minimum of 16px
- Set paragraph widths to ~45–80 characters
For apostrophes, both the typewriter (') and punctuation (’) variants are valid. Although personally, I prefer the latter purely for style reasons. Similarly for quotation marks, I prefer 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
Following SI standards, always have a non-breaking space between numbers and their corresponding units of measurement, e.g. 50 %, 100 g. For temperatures, use 1 ℃ instead of 1°C and 1 ℉ instead of 1°F. For Kelvin, use 1 °K (for now) instead of 1°K.
ligatures
I love ligatures. Wikipedia has a list of English words that may be spelled with a ligature—færie, œuvre, etc.
dashes
| symbol | name | usage | e.g. |
|---|---|---|---|
| - | hyphen-minus | item marker in bullet lists | |
| commonly as dashes or minus signs when typing | |||
| 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, © 2017–2024, October–December | ||
| 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.—Snicket |
somewhat obscure symbols
Collection in progress.
Let’s make the web prettier again with these non–widely-used typographical symbols and elements. Doesn’t this page look eesome with all of these symbols—like an old countryside manor?
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. In HTML, the <hr> (horizontal rule) 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 nowadays, the section sign (§) is used to reference sections of a document like Article § A.
formats
Copyright notices should contain the word "copyright" expressed in its symbol, word, or abbreviated form, the year of first publication or a range of years (often from first publication to the present year), and the name of the owner. The order does not matter so long as they appear together.
© 2024 A. N. Other
Copyright 2000–2024 A. N. Other
Copr. 2024 A. N. OtherFun fact: copyright for sound recordings use the phonogram symbol ℗ instead of ©.
abbreviations
Abbreviations are shortened forms of words or phrases.
| type | example | |
|---|---|---|
| contraction | I’m | I am |
| initialism | Dr. | Doctor |
| Prof. | Professor | |
| e.g. | exempli gratia | |
| D.C. | District of Columbia | |
| HTML | HyperText Markup Language | |
| acronym | GIF | Graphics Interchange Format |
| lol | laughing out loud | |
Acronyms and initialisms are basically the same thing; acronyms are just the preferred term for abbreviations that are pronounced as a word while initialisms are ones where individual letters are pronounced.
Rules regarding the inclusion of periods and rules regarding plural forms of abbreviations vary and are debated, e.g. 1 g, 5 g, two GIFs.
resources
rabbit holes
Also learn when and how to break these rules.