The rule
Pick one base size and one ratio. Every text layer is the base times the ratio to the power of n, and every role gets its own step. When a line feels too big or too small it moves one step on the scale, or you change the ratio. You never adjust the number itself by hand.
This is not a new idea. It is the modular scale from typography, which Robert Bringhurst describes and Tim Brown made practical for the web. On social it works especially well, because you always design at one fixed width.
How I ended up at 1.2
I started with a ratio of 1.333, the perfect fourth. On a chart image with seven roles that went wrong: the seven sizes got squeezed onto five usable steps, and the small labels became too large.
Then I measured my old designs. The sizes I used to set by eye (17, 20, 24, 30, 34, 38, 62, 88) were all within 4% of base 20 times 1.2, except one. My eye had already picked a scale, just sloppily. It has been frozen ever since.
Do the same with your own work: first measure what your good designs have in common, and pick the ratio closest to that.
Six ratios
| Ratio |
Name |
Feel |
Where |
| 1.2 |
minor third |
subtle, professional, many levels |
data visuals, carousels, reports |
| 1.25 |
major third |
soft, calm |
UI, slides with a lot of running text |
| 1.333 |
perfect fourth |
friendly, balanced |
posters with few levels |
| 1.414 |
augmented fourth |
modern, geometric |
tech layouts, grids |
| 1.5 |
perfect fifth |
high contrast |
hooks with 2 or 3 levels |
| 1.618 |
golden ratio |
premium, dramatic |
hero or thumbnail with 2 levels |
In doubt between two ratios? Render the same design on both and choose on the image, not on the numbers.
The scale for 1080 wide
Base 20 pixels times 1.2 gives: 17, 20, 24, 29, 35, 41, 50, 60, 72, 86, 103, 124, 149.
| Step |
Pixels |
Role |
| -1 |
17 |
pill label, fine print (absolute minimum) |
| 0 |
20 |
eyebrow, sublabel |
| +1 |
24 |
caption, legend, footer |
| +2 |
29 |
data label above a bar |
| +3 |
35 |
body, axis label |
| +4 |
41 |
pill number, subhead |
| +5 |
50 |
section head |
| +6 |
60 |
headline |
| +7 |
72 |
large headline |
| +8 |
86 |
hook headline, slide 1 only |
| +9 |
103 |
display number |
| +11 |
149 |
quote mark |
The most important agreement: two different roles never share a step. That is why the pill number sits on +4 and not on +3 next to the axis label. You have as many levels as you have roles. A chart image has seven, and that is fine.
Video and thumbnails
On video (reel, story, carousel video) I put running text and headline two steps higher than on a still image. The viewer gets less time and a smaller screen. Keep text inside the platform's safe zone. My working values on 1080 by 1920: 250 pixels free at the top, 340 at the bottom, 60 at the sides. Check them against the current interface before you make a series.
For a 1280 by 720 thumbnail I use base 64 with the golden ratio and two levels: 64, 104 and 168. Four words at most.
Per tool
- HTML to PNG or video: put the sizes at the top as CSS tokens and use only those tokens.
- Figma and Photoshop: type the calculation into the size field:
20*1.2 or 60/1.2. Both do the math.
- Canva: calculate first, then type the values. Canva does not calculate.
Line height follows size: 1.04 to 1.08 above 40 pixels, 1.25 for a subhead, 1.6 for body.
The skill
On the first run the skill records your base and ratio, and uses them in every design after that. It comes with three scripts:
typescale.py calculates the scale and prints it as CSS tokenstypescale.py --check 21 23 26 30 68 tells you which existing sizes are off the scalesnap_html.py puts a finished HTML design on the scale, keeps the order intact and gives every role its own step
Download the Social type scale skill (zip)
In Claude Code, copy the folder to ~/.claude/skills/. In the Claude app, upload the zip in the skills settings. The README in the zip covers both. No Claude? The scripts also run on their own with Python, no extra packages. The zip includes a fictional quote card to try it on.
What this does not solve
A scale does not pick your typeface, weight or color, and it does not rescue a bad layout. It removes one decision, the size, which happens to be the decision you made again for every image. Text that does not fit gets cut. You do not shrink it below step -1.
One next step
Take your three best post images and read off every font size. Let the script tell you which ones are off the scale. That list is your first house style rule.