Line-height/Font-size Chart
1.2 line-height
| pixel | font size | Line height |
|---|---|---|
| 16 | 1rem | 1.2rem |
| 18 | 1.125rem | 1.35rem |
| 20 | 1.25rem | 1.5rem |
| 22 | 1.375rem | 1.65rem |
| 24 | 1.5rem | 1.8rem |
| 28 | 1.75rem | 2.1rem |
| 30 | 1.875rem | 2.25rem |
| 32 | 2rem | 2.4rem |
| 36 | 2.25rem | 2.7rem |
| 40 | 2.5rem | 3rem |
| 44 | 2.75rem | 3.3rem |
| 48 | 3rem | 3.6rem |
| 52 | 3.25rem | 3.9rem |
| 56 | 3.5rem | 4.2rem |
| 60 | 3.75rem | 4.5rem |
| 64 | 4rem | 4.8rem |
1.5 line-height
| pixel | font size | Line height |
|---|---|---|
| 16 | 1rem | 1.5rem |
| 18 | 1.125rem | 1.6875rem |
| 20 | 1.25rem | 1.875rem |
| 22 | 1.375rem | 2.0625rem |
| 24 | 1.5rem | 2.25rem |
| 28 | 1.75rem | 2.625rem |
| 30 | 1.875rem | 2.8125rem |
| 32 | 2rem | 3rem |
| 36 | 2.25rem | 3.375rem |
| 40 | 2.5rem | 3.75rem |
| 44 | 2.75rem | 4.125rem |
| 48 | 3rem | 4.5rem |
| 52 | 3.25rem | 4.875rem |
| 56 | 3.5rem | 5.25rem |
| 60 | 3.75rem | 5.625rem |
| 64 | 4rem | 6rem |
1.2 line-height
This 1.2 line-height spacing; font-size is 1.25rem. Text has to wrap to see it. Don't confuse it with vertical margins between paragraphs.
1.5 line-height
This 1.5 line-height spacing; font-size is 1.25rem. Text has to wrap to see it. Don't confuse it with vertical margins between paragraphs.
No Scaling
If you don't want to fool with calculating and scaling line-height use:
line-height: 1.4; or your preferred value.