Member-only story
UI/UX Design: Dead Simple Type Setup in Figma
How to spec type in Figma for 4pt grids quickly and easily.
Overview
Speccing type for your next big project can be a huge pain and a time-sink if you have to do it completely from scratch.
Today, I’m going to show you how you can spec type in Figma quickly and easily for a 4pt grid.
The hard way
The hard way is infinitely harder than the easy way, so if you want to skip this part, please feel free.
Essentially, you’ll want to create:
- H1-H6 header styles
- Body styles
- Quote styles, and
- Label styles
The best way to spec these for a 4pt grid are as follows (please note that the number before the “/” is the type size, and the number after is the line height):
- H1 heading: 40px/48px |2.5rem/3rem
- H2 heading: 36px/44px |2.25rem/2.75rem
- H3 heading: 32px/40px |2rem/2.5rem
- H4 heading: 28px/36px |1.75rem/2.25rem
- H5 heading: 24px/32px |1.5rem/2rem
- H6 heading: 20px/28px |1.25rem/1.75rem
- Pull Quote (Italics): 20px/28px |1.25rem/1.75rem
- Body Copy: 16px/24px |1rem/1.5rem
- Small Label: 12px/16px |2.5rem/3rem
Each one of these will have to be manually specced in the “Text” styles edit box in Figma:
These settings, when applied to each item, will give you nearly perfect 4pt type specifications that you can use pretty much anywhere you like.
I have found that they look nice on desktop, and play nice on mobile, so it makes up the base of what I like to use.
That said, you can go even larger for your display headings, but what we have above will get you where you want to go the lion’s share of the time for basic operations.
The easy way
Now that you know the hard way, let me show you the easy way:
Just duplicate this file here and you’re off to the races.
I’ve already specced out the type for each item we discussed above. You can modify them to your heart’s content, and port them into your own projects via copy/paste.
Job done, you just saved yourself a decent amount of time and headache.
Happy designing! ;D
