Typeface vs. Font
The words Typeface and Font are often used interchangeably now. Calling a typeface a font isn't necessarily wrong, however it can still be useful to know the difference.
A font refers to a specific style or weight within a typeface family. A typeface is a collection of fonts.
How to use typefaces and fonts
A good rule of thumb when it comes to typefaces and fonts is to use no more than 2 different typefaces in a project, and to skip a font weight for more contrast. For example, if you use Regular weight for your body text, you could use the SemiBold weight to highlight something important in the text, instead of the Medium weight.
Leading or Line height
The leading refers to the height or space between lines of text in a paragraph. A tight leading or line height will generally work better for large text (e.g. headlines), whereas a more loose leading will be better for pages with a lot of text (e.g. blogs and articles).
How to use proper leading
A good rule of thumb when choosing line height for your text is to go with 1.5 times your font size for body text. For example, if your text is 16px, you could use a line height of 24. You could opt for a slightly looser line height as well as font size for a blog or article post to improve legibility. A font size of 18px and a line height of between 28 and 32 could work well for this.For large text, I recommend using the same number for the line height as the font size. So if you use a font size of 72px for your headline (or other large text), a line height of 72 should usually work well too.
ADDITIONAL TIP: You can input a percentage in the line height field in Figma. For body text, you can use 150% for your line height. For large text, you can use 100%.
Tracking or Letter spacing
Tracking refers to the uniform space between each letter in a sentence.
As a rule of thumb, tracking shouldn't often be changed from the default settings. However, when using very small text, and all caps text, looser tracking will improve legibility in most cases.
Kerning
Unlike tracking, kerning is the space between pairs of characters and is not consistent between every two letters. Good kerning gives a sense of uniformity.
With most typefaces, this is usually not something that needs to be adjusted.
Baseline
The baseline is an invisible line on which most of the letters sit. With almost every typeface, you will notice that round letters such as e, u and o overshoot the baseline a little bit. This is to make the typeface optically consistent and aligned.
Double Story
A double story letter is a type of letter that has two counters as opposed to just one.
Ligature
A ligature is a line that connects two characters together. It's generally decorative, and mostly used for script typefaces, although some serif and sans serif typefaces have ligatures as an option.
Widow
A widow is a very short line, usually one word, at the end of a paragraph. A widow is considered bad typography because it leaves too much white space at the end of the paragraph or column.
You can fix it by using manual line breaks or adjusting the width of your text area when possible.
Orphan
An orphan is similar to the widow, although it is found at the beginning of a paragraph or column.
Rag
In typography, rag refers to the uneven vertical spacing of a paragraph of text. When left-aligned, the rag will be on the right side.
A poor rag creates distracting shapes in the white space of the margin. This can be fixed by doing manual line breaks in the text (when possible).
