#DIFFERENCE BETWEEN FONT AND TYPEFACE HOW TO#

Legibility – This refers to how easy it is to distinguish one letter from another in a particular typeface. While the default is typically fine, you can always fine-tune leading to make text extra-comfortable to read for your users. Leading – This is the adjustment of vertical space between lines of text. You can fine-tune tracking by compacting or expanding this space to optimize your text. Tracking – This is the adjustment of space between a whole group of letters (rather than each one, as in kerning). Also, if you kern one headline, be consistent and kern the others. It’s better to devote time to kerning with larger text and headlines (as opposed to smaller text and body copy). An example of bad kerning is when you use a font that has the letters so close together that (e.g.) what you typed as “kerning” shows up as “keming” (the letters get mashed together). Kerning – This is the adjustment of space between two individual letters. Here are some helpful points to consider with the finer points of type: © Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0 Design Tips for Type

Weight: The thickness of a font’s stroke. X-height: The distance between the baseline and the height of the lowercase letter ‘x’.

Uppercase: A typecase containing capital letters. Terminal: A circular form at the end of the arm, leg or brow in letters. Stroke: A straight or curved line that creates the principal part of a letter. Small Capital: Short capital letters designed to blend with lowercase text. Serif: A stroke added to the beginning or end of one of the main strokes of a letter. Stem: A main stroke that is more or less straight, not part of a bowl. Spine: The main curved stroke of a lowercase or capital letter.

Shoulder: A curved stroke originating from a stem. Lowercase: A smaller form of letters in a typeface.

Ligature: Two or more letters tied into a single character.

#DIFFERENCE BETWEEN FONT AND TYPEFACE HOW TO#

These are the terms to have in your “type dictionary” so you better understand how type is created and how to use it effectively in your work:Īperture: The partially enclosed space of a letterform.Īscender: An upward vertical stroke that extends beyond the x-height.īaseline: The invisible line on which all letters rest.īowl: The generally round or elliptical forms which are the basic body shape of letters.Ĭap height: The distance from the baseline to the top of the capital letter.Ĭounter: The white space enclosed by a letterform.Ĭross bar: The horizontal stroke in letters.ĭescender: A downward vertical stroke that extends beyond the baseline.ĭot: Also known as a tittle, is a small diacritic on a lowercase i or j.Įye: The closed counter of a lowercase e.įinial: A tapered or curved end on a letterform. Be it for a website headline, a call-to-action button or a host of other functions, when you break type down to the anatomical level, you’ll have the building blocks to create a more legible and readable experience for your users. So, it’s important to have an understanding of what goes into the type that you select. Not only are the words you choose important the typographic choices you make such as font style and how you lay out your text onscreen are equally vital, too. Your text plays a vital role in carrying the right message to your users.

Difference between font and typeface