Typography is about how it reinforces the message.

If your argument is easy to follow then it will be a winning one.

Book uses a degree symbol to indicate links; theory is the link should be visible when sought but not overtake the document as an important figure.

"Butterfly ballot."

Bad typography can have consequences.

Typography is the visual component of the written word.

Readers have no attention, don't really care, and have tons of other choices.

Attention is a precious resource.

I’ll even go one better: I believe that most readers are looking for reasons to stop reading.

The substance matters, but if that’s all that mattered, then everything could be set in 12-point times new roman. And that would be the equivalent of mumbling toward your shoes.

Consider if you should add more symbols to things (ex. after links) or change the style of symbols already used (quotes, parentheses, dashes.)

Curly quotes not straight quotes.

Don't turn quotes in code blocks in to curly quotes.

Use one space after punctuation and not two.

Avoid usage of exclamation points.

Interrobang: a question mark and exclamation point stamped atop one another.

Emojis are considered "casual" typography.

Semicolon: conjoins two sentences. A subordinant sentence should use a comma.

Semicolons also delineate items in a list wherein list items contain commas.

Pilcrows markers can be used to reference numbered paragraphs.

Section markers can be used to reference particular points in outlined documents.

Reference to multiple paragraphs and sections may double up the symbol.

Braces and brackets should not be italizied or bolded along with the contents; unless the contents smashes in to the punctuation without it.

Hyphens do not indicate prefices (dis-information) but do indicate two words are tied as descriptors to an object (five-dollar bills.)

En-dashes indicate a range, connection or contrast.

Em-dashes are for inserting pauses in a sentence for effect but not structurally relevant.

Use the actual symbols instead of (c) and (TM)

Use nonbreak spaces to keep symbols attached to what the symbol is representing.

Trademark symbols, on the other hand, are more like little barnacles of legalese—immovable but mostly ignored.

Ampersands are a contraction for "and." Always appropriate for use in names. Otherwise for informal documents.

Ellipsis indicates an omission from text.

If required to use periods w/ spaces instead of ellipsis then use nonbreak space to keep the symbols together.

Signature lines made from either spamming underscores, or having a series of spaces set with an underlined style.

Apostrophes point downward. Some smart quoting systems will incorrectly replace "'7s, rock 'n' roll" with open quotes when none of them are.

Foot and inch marks look like quotes but should not be made curly.

"Thin spaces" are whitespace that takes up less space than usual; in HTML this is   and it might be used for the spacing after periods which are part of acronyms or initials for names.

Tabulators (tabs) move the caret to a "tab stop." These are supposed to be used for tabular content.

Use a single line break between paragraphs, or store them in paragraph tags. Styling can insert blank spaces between paragraphs where it is required.

Hard page breaks to insert page breaks.

tl;dr when a special code exists to do a thing, use that instead of relying on the result happening for some coincidental reason (ex. use page breaks, not adding extra paragraphs because it happens to result in a new page.)

Soft hyphens; html has ­ will be invisible unless a line breaks on this, to which it renders as a hyphen.

For math use an en-dash instead of a dash for subtraction. Use multiplication symbol instead of asterisk.

Ligatures originate from letters that need to overlap but could not because of metal plates in a printing press.

May have to make sure ligatures are turned in in CSS or your tool of use.

Underlining is a holdover from typewriters. Consider using something else (post-content symbols, font styles, small caps, point size.)

Use bold to emphasize sans-serif fonts and italics to emphasize serif fonts.

Don't run entire paragraphs in ALL CAPS.

Avoid nesting headings too deeply

Readers should be able to orient themselves in the content from the headings

If text is in all caps or small caps, add 5-10% letter spacing to adjust for legibility.

Make sure kerning is enabled.

Gradients: best when subtle if used at all.

Lining figures: means the numbers line up at the top and bottom lines.

Oldstyle figures: means the numbers line up with lowercase characters.

Tabular figures: figures which are spaced so they line up as monospaced characters would.

Ordinals: the "th" part of "4th" which is usually superscripted. Some fonts contain characters for these superscripts.

Insert break points in e-mail addresses/web URIs so they don't break somewhere stupid.

Quinn: tags tell HTML5 where it can break a word, but unlike ­ it does not insert a hyphen.

Small caps: often faked by browsers and word processors. Sometimes come as OpenType options or separate typefaces.

Prefer numerical outlines (1, 1.1, 1.2, 2) to alternating or strange headings.

Most documents can tolerate two typefaces. Some tolerate thirds. For presentations each slide counts as the same document.

Few programs genuinely support OpenType features for typograhy.

Avoid centering text for anything but very small pieces of text, or particular artisinal pursuits where the line breaks are designed.

Justified text must also have hyphenations annotated to avoid ugliness.

Prefer adjusting spacing between words to adjusting spacing between letters.

Negative first line indentation: called a "hanging indent."

Shorter lines are more comfortable to read. Aim for 45-90 characters.

Page margins: adjust until the text has a comfortable width.

You may want to avoid hyphenation in headings and headlines.

Readers tend to skip over long block quotations.

Turn off the cell and table borders and turn decorations back on where it makes the table more legible.

Consider adding a small amount of extra space to table cell margins.

Space before and after an element can be used for emphasis.

Widows are when part of a paragraph has been pushed to the next page.

Orphans are when only the later chunk of a paragraph appears at the start of a page.

Hard Line Breaks insert new lines without making a new paragraph.

"Page break before" codes are intended to be put in header styles, so that those headers start new pages.

Columns can be used to ensure a comfortable width of text to read.

OK. But it also proved that if you take ugly shit and align it to a grid—it’s still ugly shit.

Use styles/markup to get consistent typography and formatting of documents.

Maxims

• Decide how body text will look
• Divide in to foreground and background
• Make very small changes
• Make and test samples
• Apply chosen styles consistently
• Relate elements to previously seen elements
• Simplicity
• Immitation is OK
• Whitespace is OK