צרו סולם טיפוגרפי מודולרי מכל גודל בסיס ויחס (1.125 עד 1.618), והעתיקו אותו כמשתני CSS מותאמים אישית או כתצורת Tailwind.
| מדרגה | px | rem | em | גובה שורה | תצוגה מקדימה |
|---|
סולם מודולרי מכפיל את הבסיס ביחס עבור כל מדרגה למעלה, ומחלק עבור כל מדרגה למטה. מדרגה 0 היא הבסיס, מדרגה 1 = בסיס × יחס, מדרגה −1 = בסיס ÷ יחס, וכן הלאה.
גובה השורה המוצע יורד ככל שהגודל עולה: 1.6 לטקסט רץ, 1.4 לכותרות, 1.1 לגדלי תצוגה — מחושב כ-`1.7 − 0.1 × stepAbove` מוגבל לטווח [1.05, 1.7].
A modular scale multiplies one base size by a fixed ratio for each step up and divides for each step down. This generator produces ten steps, from −5 to +4, using size = base × ratio^step, so at the default 16 px base and 1.2 ratio, step +1 is 19.20 px and step −1 is 13.33 px. Each row also reports rem (px ÷ 16), em (px ÷ base), and a suggested line-height of 1.7 − 0.1 × (step + 5), clamped between 1.05 and 1.7.
The ratio dropdown is the real design decision. Minor second 1.067 and Major second 1.125 give tight, dense scales suited to dashboards and data-heavy interfaces. Minor third 1.2, the default, and Major third 1.25 suit most websites. Perfect fourth 1.333, Augmented fourth 1.414, Perfect fifth 1.5 and Golden ratio 1.618 open up fast and work best for editorial or landing pages. Base size accepts 8 to 32 px, and the CSS variable prefix defaults to --fs.
Two caveats are worth knowing before you paste the export. The rem column always divides by 16, so if you change the root font size in your own stylesheet the exported rem values will no longer match the pixel figures shown. And the step names are offset from the arithmetic: the ten tokens run xs, sm, base, md, lg, xl, 2xl, 3xl, 4xl and 5xl across steps −5 to +4, which places step 0 — the size you actually typed — under the name xl rather than base.
1.2, the minor third, is the default and the safest for general web work. Go tighter with 1.125 for information-dense interfaces where many sizes must coexist. Reach for 1.5 or the 1.618 golden ratio only when you have few sizes and want dramatic headline contrast.
Yes. The Copy Tailwind fontSize block button puts a ready-made fontSize object on your clipboard, each entry pairing a rem value with its calculated lineHeight. The Copy CSS custom properties button instead emits a :root block using whatever variable prefix you have set.
It falls as size grows, using 1.7 − 0.1 × (step + 5) clamped into a 1.05 to 1.7 range. The smallest step receives 1.7 and the largest steps bottom out at 1.05. Treat it as a starting point and adjust once you know your real line length.
rem always divides the pixel size by 16, the browser default root size, while em divides by whichever base you entered. With a 16 px base the two columns are identical; set the base to 18 and they diverge at every step of the scale.
You cannot from this tool, which always outputs the same fixed ten steps from −5 to +4. To extend the range, multiply the largest value by the ratio again yourself, or lower the base size and shift which portion of the scale you use.
Pixels to cm / Inches Converter (Print DPI)
Convert pixel dimensions to physical print size at any DPI/PPI, with bleed and safe-zone helpers.
Color Converter — HEX, RGB, HSL, OKLCH & Contrast
Convert any color between HEX, RGB, HSL, HWB, OKLCH and LCH, with WCAG contrast checking against any background.
Aspect Ratio Resizer (Image, Video, Social)
Resize any dimensions while keeping aspect ratio, with presets for Instagram, TikTok, YouTube and cinema formats.
Font Size Converter (pt, px, rem, em, %)
Convert font sizes between pt, px, rem, em and % for web and print typography.
