Figma Typography Templates

Figma Typography Templates

Typography is a foundational element of visual design. Proper use of typography makes content more attractive, and scannable. Mastering key typography techniques will greatly elevate your design capabilities.

Choosing complementary fonts is crucial. Pair simple clean Manrope with traditional serif fonts like Inter. Match font personalities to your brand tone. Use font pairings consistently across headings and body text.

Apply Font Size

Picking the right font sizes is important for Creating hierarchy Larger text grabs attention, smaller recedes, Readability Sizes should allow comfortable reading Consistency Similar content should have matching sizes Contrast Differences between sizes need to stand out.

Some best practices for font sizes Headings: Use larger sizes like 32px, 28px, 24px, Body text: Use smaller sizes like 16px, 14px, 12px, Supporting text: Use even smaller sizes like 11px, 10px, Limit variety - 3-5 sizes for most designs, Mind mobile sizes - Text should remain legible

Font Weight

Font weight refers to how thick or thin the letters look. Weights create visual contrast. Thin - Very slender letters, Light - More delicate, elegant, Regular - Standard weight, Medium - Nicely balanced, Bold - Thicker, grabs attention, Black - Very heavy letters. Using different weights adds emphasis Bold for headings Regular for body text Light for secondary info Combining weights makes fonts more versatile Pair bold headings with light body text Use medium to smooth thick and thin fonts.

Line height

Line height controls the space between lines of text. Wider line height makes the text more legible and scannable. Guidelines for good line height Body text 140-150% of font size Headings Tighter, like 120-130%.

So 16px font = 23-24px line height. Why larger line height helps More white space between lines Easier for eyes to track lines More airflow and less dense. But line height should not be too loose Can cause text blocks to look disjointed, Makes readers work harder finding next line.

Letter spacing

Letter spacing, or tracking, fine tunes the space between letters. Wider tracking can help fit short column widths. Tighter tracking improves readability for all-caps titles. But avoid distorting the natural letterforms.

Tighter tracking can Increase readability of long text, Improve legibility at small sizes, Create a classical, elegant look. But be careful not to distort letters Avoid huge gaps between letters Don't squash letters too tightly together. Guidelines for tracking All-caps title: +50 to +100 Body text: 0 to -50 is common Don't change tracking too drastically.

Add text to the local styles

At the top right, click on "Local Styles". Click the plus icon to open the "Create new style" menu. Select "Text" from the options. Name your new text style something like "Body Text" Customize the text properties like Font Family, Font Size, Font Weight, Letter Spacing, Line Height

Set each property how you want for this style. For example, Size: 16px,
Height: 24px, Weight: Regular, Spacing: 0 and then Click "Create Style" when finished.