Генератор типографской шкалы
Генерация гармоничных типографских шкал с использованием модульных соотношений, таких как Большая терция, Чистая кварта и Золотое сечение.
xss0.640remThe quick brown fox
xs0.800remThe quick brown fox
base1.000remThe quick brown fox
lg1.250remThe quick brown fox
xl1.563remThe quick brown fox
2xl1.953remThe quick brown fox
3xl2.441remThe quick brown fox
4xl3.052remThe quick brown fox
5xl3.815remThe quick brown fox
:root {
/* Typography Scale - Base: 16px, Ratio: 1.25 */
--font-size-xss: 0.640rem;
--font-size-xs: 0.800rem;
--font-size-base: 1.000rem;
--font-size-lg: 1.250rem;
--font-size-xl: 1.563rem;
--font-size-2xl: 1.953rem;
--font-size-3xl: 2.441rem;
--font-size-4xl: 3.052rem;
--font-size-5xl: 3.815rem;
}
xss
10px
0.640rem
xs
13px
0.800rem
base
16px
1.000rem
lg
20px
1.250rem
xl
25px
1.563rem
2xl
31px
1.953rem
3xl
39px
2.441rem
4xl
49px
3.052rem
5xl
61px
3.815rem
Modular Typography Scales - Технические детали
A modular scale creates consistent, harmonious relationships between font sizes. Each size is multiplied by a ratio to get the next size, creating visual harmony throughout your design system.
Альтернатива командной строки
:root {\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.125rem;\n --text-xl: 1.25rem;\n --text-2xl: 1.5rem;\n}