Typography
Learn the basic terms and definitions used in Typography.
Typography
Typography is both an art and a technique that involves the arrangement and selection of a lot of parameters. It is the basis of all written communication. Typography is more than just selecting beautiful fonts.
Typeface and Font
The terms typeface and font are often used synonymously.
Typefaces are a family of fonts.
A Font is only one specific weight or style within a typeface family.
The Two most common Typeface classifications are Serif and san-serif.
A font is a typeface variation of a certain size and style. Each typeface may have numerous fonts that often differ in weight, slant, italicization, and other criteria. Nowadays, the terms “font” and “typeface” are commonly used interchangeably, but actually, font exists as a part of the latter.
Helvetica is a well-known typeface, while 12pt Helvetica Bold and 14 pt Helvetica Light are its fonts.
A typeface, aka type family, is a unique set of glyphs (an alphabet accompanied with numerals and punctuation) that share a common design. Don’t confuse a typeface with font where the former is a father of the latter. You may select Roboto as the primary typeface for a project, but you’d use various fonts like 12pt Roboto Regular and 9pt Roboto Bold.
Font size
Font size is the height of a typeface that equals the distance between the baseline and the mean line of lower-case letters. Designers usually use points (8, 10, 12, etc.) to measure the font size.
Font weight
The font weight refers to the thickness of a stroke on a given typeface. Fonts range from thin (also called hairline or light) to black (heavy), with a lot of weights in between. The most commonly seen weights, though, are bold and regular.
Serif and San-serif
The fonts that have a small stroke at the end of a main horizontal or vertical stroke is called a Serif font. These strokes help to lead the eye while reading a sentence.
E.g.- Times New Roman, Georgia.
The fonts without a serif stroke are called Sans-serif fonts. In French, the term ‘sans-serif’ means without serif. The most popular are Arial, Helvetica, and Tahoma, which are compatible with almost any device.
Typeface classifications based on Style
Regular or Roman is the basic style of a typeface. It is most commonly used for body text.
Italics is a cursive alphabet that is matched with a Roman font. It is used mainly for emphasis.
- Roman typefaces are mostly upright, and italic typefaces tend to slant to the right.
- A genuine italic is created from scratch. They are not just a tilted or slanted version of the Roman face.
- A true italic exhibit unique attributes that are not seen in the Roman face.
Condensed is a narrower version of the Roman style. They are mostly used where space is tight and when we have to use the same typeface itself.
Extended is a wider version of the Roman style.
Bold has a wider stroke than Roman style. As the stroke gets thicker, the versions are called medium, semi-bold, black, super, and poster.
Light is a variation of the Roman style with a lighter stroke.
Typography Terminologies
Baseline: It is an imaginary line where all the characters sit on. It varies according to the typeface.
Mean Line: Mean or Midline denotes the highest point of lower case letters like ‘x’.
Cap Line: This denotes the highest point of uppercase letters.
Ascender Line: This line denotes the highest point of the letterform.
Descender Line: This line denotes the lowest point of the letterform.
X-height: It is the distance between the baseline and the mean line. It is usually the height of non-ascending characters such as ‘x’ and hence called x-height. Different typefaces with the same point size can have different x-heights.
Cap height: The height of capital letters or the distance between baseline and cap line.
Ascender height: The distance between baseline and ascender line.
Descender height: The distance between baseline and descender line.
Superscripts: The characters that are aligned with the ascender line.
Subscripts: The characters that are aligned with the descender line.
Ascender: The part of a letter that extends above the x-height.
Descender: The part of a letter that falls below the baseline.
Barb: A serif that is sharply pointed.
Beak: The serif that appears at the end of an arm.
Bowl: The shape that encloses a space in circular letterforms.
Bracket: The transitional shape connecting the serif and stem.
Counter: It is the space inside a bowl.
Crossbar: It is the horizontal stroke that intersects the central stem. Also known as a Bar.
Crotch: It is the inner point at which two angled strokes meet.
Cross Stroke: It is the horizontal stroke that intersects the stem of a lowercase ‘f’ or ‘t’.
Ear: It is a small stroke extending from the bowl of a ‘g’ or ‘r’.
Finial: It is an ornamental terminal stroke seen at the top of the characters.
Link: A stroke that joints two other letter parts.
Loop: The bowl formed by the lower part of a double-storey ‘g’.
Leg: The lower stroke of a letter.
Serif: It is a stroke at the end of the main vertical or horizontal stroke.
Shoulder: It is the curved stroke leading to the leg of an ‘h’.
Spine: It is a curving stroke of ‘S’.
Spur: It is the end of a stem of a rounded letter.
Stem: It is the main vertical diagonal stroke of a letter.
Stress: It is the orientation of a curved character.
Tail: It is the descending stroke of a letter.
Vertex: It is the angle formed at the base of a letter when strokes meet.
A ligature is the joining of two or three individual characters to create a single unit to prevent interference.
Tracking is the amount of spacing between the characters of a word or a text block.
Kerning is the space between letters and varies per character to create comfortable looking typography.
Word spacing is the space between two words. A higher word spacing will make it more disjointed, and a lower word spacing will make it tighter.
Leading is the distance between two baselines on consecutive lines of text.
- Leading depends on the size of the type.
- When you have a large size of type, more leading is needed between the lines.
- Provide a minimum of 20% of the point size for the leading: fix a leading for 120%. i.e., 10 pt type must have 12 pts of leading
Alignment: It is the horizontal position of type.
Left: It is the text aligned to the left margin. Easy to read.
Right: It is the text aligned to the right margin. Difficult to read.
Center: It is the text aligned to the center to form a symmetrical shape.
Justified: Each line extends from left to right margins varying space between words.
Advanced Alignment
Runaround: Text is wrapped around a picture.
Asymmetric: The lines are not aligned with each other.
Concrete: The text takes the shape of a concrete object.
Learn more about UX copywriting, Wireframing, Color Theory, Color Terminologies, Typography, UX Research Techniques, Dark Mode UI, Hick’s Law, Fitt’s Law and Usability Principles.
