Good typography is invisible, and bad typography is painfully visible.
There is no "right or wrong" with typography, merely degrees of appropriateness.
Typography should express a site's tone, attitude, and personality.
It directly affects communication and Accessibility
There aren't any formal rules, but theres a LOT of options.
Understanding the basics of typography is important to knowing what makes type choices suited or unsuited for websites, and building a personal collection of good fonts to build on and choose from for our work.
Typefaces are a set of styles for a site's typography, while a Font is the format or type of storage for the type. Typefaces are like songs and fonts are like mp3's.
Icon Font - Have characters filled with symbols, not letters.
EM - A relative unit of measurement equal to your font size.
Contrast - The differences in the thick and thin strokes of a font's letters, as well as the whitespace between and inside them. High Contrast fonts stop readers and get their attention, so are better suited for headlines. Low Contrast fonts make for smoother, faster, more rhythmic reading and are better suited for body copy.
EM Box -
Weight/Style Flexibility - How many different included weights and styles, such as italics and condensed, are included in a typeface. Good for establishing a clear hierarchy of what typefaces go where while keeping overall typography simple. Sites can be built on a single typeface with lots of flexibility.
X-height - The height of a typeface's lowercase letters from the baseline going to the top of an uppercase letters. A low x-height means lowercase letters are relatively small compared to uppercase ones, increasing contrast. A high x-height means they're similar heights which lowers contrast
Counter - A letter's interior space, enclosed or open. Important for contrast and letter recognizability.
Aperture - The possible opening in a letter's counter. Important for contrast and letter recognizability.
Uppercase/Lowercase Numerals - Uppercase numerals are numbers as tall as a typeface's uppercase letters. Lowercase numerals are generally just as tall as lowercase letters, making them more suited for running text.
Serif - Typefaces with small lines or points at the edges of letters.
Sans-serif - Typefaces without the small lines or points at the ends found in Serif typefaces.
Slab-serif - Typefaces with serifs, but which are blocky instead of pointed.
Tabular Figures - Numbers with fixed spacing, used in tables
Curly Quotes - Punctation, such as quotation marks, that have curls. Correct punctuation for quoted text and dialogue.
Dumb Quotes - Punctiation without curls. Sign of sloppy typography, do not use.
Small Caps - Capital letters slightly taller than the x-height. Made to blend in with lowercase letters for instances like acronyms.
Ligature - Combines two or more characters to make a joined letterform. Good for letters that look bad next to each other, so type remains fluid.
Terminals - Ends of the strokes in letters.
Fallback Fonts - Fonts that render when your webfonts fail to load or are still loading.
Type for a Moment - Content that should only need a moment to read. Typography like this should be punchy, get attention, and look well in large font sizes.
Type to Live With - Type readers spend a lot more time reading, like body copy. Shouldn't be too loud, too high-contrast, or too disruptive.
Ready-mades - Typography with design baked in, like Halloween fonts with blood dripping from them. Avoid them.
Hierarchy - A visual establishment of which items are most and least important. Is defined in many elements than just type size - color, contrast, family, and placement. All must be kept in mind to establish a strong hierarchy.
Composition - How typography works in the larger context of the browser and page design. Some specific factors are the chosen device, physical screen size, screen resolution, window size, browser settings, page layout, etc. Many elements can be controlled but others often depend entirely on the user.
Baseline Grid - A series of rows spun out of the spacing between baselines in text. Made to horizontally all type on the page to make a consistent rhythm and pacing. Is somewhat under debate if they're vital for web typography.
Rivers - Apparent openings and gaps through justified text. Lines of text are a consistent width but the gaps between words form these rivers, which are visually distracting.