The main purpose of typography is to make the consumption of various kind of content ergonomic: first distinctive and recognizable, then easy to read and comprehend.
The kind of content defines the semantic categories for font characteristics set usually reflected in the purpose of content:
- reading - text, headers, tips,... - Roboto, SourceSansPro
- script/code presentation - monospaced
- initialism - lone symbol/ mini tags / acronyms - barley
- iconized - letter in/as icon, badge
- tag - icon label, tag without background/border
Each category most likely will use own set of typeface, font type and font properties like spacing, size, weight, etc.
Lets go over each semantic typography category and explore the purpose and applicable properties.
READING - I guess it is self-explanatory. The sentences, paragraphs and pages of text should be easy to read for hours. Besides of font it defines ergonomics for eye and even neck: you do not want your reader to swing eyes and head righ-left while reading the multi line text. The newspaper columns are good samples or solving such problem. I still love the books with 2-column page layout.
SCRIPT - is a special kind of text which I love to read. Here the even space distribution and positioning of particular keyword and elements matter. Most of scripts have special formatters associated. A source of "holy wars" which do not have any winner. Accounting the industry standards and personal taste make ideal presentation almost impossible. But in same time gives personalisation advantage. Since each type of script have own semantic vocabulary, we will keep it aside for now focusing on most common features of script typography. Monospace font, keywords coloring. The light/dark background mode has a special meaning here and important to support.
INITIALIZM - usually a few letters used as a tag. The first letters of name as replacement for face image is a good example. It is often surrounded by rounded background. Used in spaced visually separated often interactive (clickable), custom state-aware UX elements.
ICONIZED - the letter in icon along with image based icons. As icon itself should be at least 2x larger of average font size to assure picture recognition, the iconized letter size should match the image-based icons. While the font requirements are pretty same as in initializm, the dimensions should align to iconography.
TAG - while the tag in outlined border or background usually match the "label" styling, tags could be shown without border and background. In this case they have to be distinguished by font properties. There nothing special about that except the contrast to the text around. Usually by larger font weight and size. Icon label and buttons text, horizontal menu items without borders fit into same semantics of atomic often actionable UX element. As the word "tag" in beginning of this paragraph :)
Extra spacing is dimensional requirement for such elements.
