Clew

Басты бетҚұралдарТипографиялық шкала генераторы

Типографиялық шкала генераторы резеңке clamp()-пен

Ең тар және ең кең экран үшін базалық өлшем мен коэффициентті таңдаңыз — байсалды кіші секундадан алтын қимаға дейін. Генератор әр баспалдақты есептейді, екі ен арасында біркелкі өсетін CSS clamp() жазады, шкаланы кез келген енде көрсетеді, браузер масштабына кедергі келтіретін өлшемдерді ескертеді және CSS айнымалыларына, Tailwind конфигіне, SCSS-ке немесе дизайн-токендерге экспорттайды.

● Тегін, тіркелусізЖаңартылды:

Міндетті емес, мысалы fs → --fs-step-0

—

 

Әр баспалдақтың минималды және максималды ендегі қаріп өлшемі мен CSS мәні
БаспалдақМин., pxМакс., pxCSS мәні 

    
Формула. өлшем = база · коэффициентбаспалдақ әр ен үшін; көлбеулік = (макс − мин) / (енмакс − енмин); font-size: clamp(мин, (мин − көлбеулік · енмин) / 16 rem + көлбеулік · 100 vw, макс).

  




Барлығы браузеріңізде есептеледі — енгізген деректеріңіз ешқайда жіберілмейді.
Қалай пайдалану керек


  1. Экран ендерін беріңізМинималды ен — сіз жобалайтын ең тар экран (360 px — телефонның жиі кездесетін ені), максималды — макет өсуін тоқтататын ен. Бір статикалық шкала керек болса, «Резеңке» белгісін алып тастаңыз.
  2. База мен коэффициентті таңдаңызНегізгі мәтін әдетте 16–18 px. Кіші коэффициенттер тығыз интерфейстерге, үлкендері әсерлі тақырыптарға лайық. Телефонда кішірек, десктопта үлкенірек коэффициент тақырыптардың шетке шығып кетуіне жол бермейді.
  3. Превью мен кестені тексеріңізКез келген экранда барлық баспалдақты көру үшін ен сырғытпасын жылжытыңыз. Кестеде екі шеттегі өлшемдер мен clamp() мәні, ал масштаб ескертулері превью үстінде көрсетіледі.
  4. Кодты экспорттаңызCSS айнымалыларын, Tailwind v3 не v4, SCSS немесе дизайн-токендерді таңдап, префикс пен баспалдақ атауларын беріп, кодты көшіріңіз.
Модульдік типографиялық шкала деген не
Модульдік шкала — әр келесі өлшем алдыңғысын бір коэффициентке көбейткенге тең болатын қаріп өлшемдерінің жиыны. 14, 18, 22 және 31-ді көзбен таңдаудың орнына базаны және коэффициентті таңдайсыз — сонда барлық тақырып, жазу мен белгі өзара байланысты өлшем алады. Идея музыкадан келген, онда ноталар арасындағы интервалдар — жиіліктер қатынасы; вебте оны Тим Браунның «More Meaningful Typography» мақаласы (A List Apart, 2011) танымал етті.


өлшем(баспалдақ) = база × коэффициент ^ баспалдақ

база 16 px, коэффициент 1,25 (үлкен терция):
баспалдақ −1 = 12,8 px   баспалдақ 0 = 16 px   баспалдақ 1 = 20 px
баспалдақ 2 = 25 px      баспалдақ 3 = 31,25 px   баспалдақ 4 = 39,06 px


Теріс баспалдақтар — жазулар мен ұсақ мәтін, оң баспалдақтар — тақырыптар. Жиі қолданылатын коэффициенттер және олардың орны:


    

  • 1,067 кіші секунда, 1,125 үлкен секунда — өте тығыз шкалалар: дашбордтар, деректері көп қосымшалар, кішкентай экрандар.
    • 

  • 1,2 кіші терция, 1,25 үлкен терция — өнім интерфейстері мен құжаттамаға ең жиі таңдау.
    • 

  • 1,333 таза кварта, 1,414 үлкейтілген кварта — лендингтер мен блогтарға айқын иерархия.
    • 

  • 1,5 таза квинта, 1,6 кіші секста, 1,618 алтын қима — әсерлі шкалалар; баспалдақтар аз болсын, әйтпесе төртіншісінде тақырыптар тым үлкейіп кетеді.
    • 



Дөңгелек мәндер міндетті емес: браузерлер бөлшек өлшемдерді салады, ал баспалдақтардың үйлесімділігі бүтін сандардан маңыздырақ.
CSS clamp() арқылы резеңке типографика
Бір шкала 360 px телефонға да, 1440 px десктопқа да сирек жарасады: десктопта жақсы тақырыптар мобильде шетке шығады. Бұрын мұны өлшемдерді секіртіп ауыстыратын медиасұраулармен шешетін. Резеңке типографика әр өлшемді екі нүкте арасында экран енімен бірге сызықтық өсіреді, ал шектен тыс бекітеді. CSS-те бұл бір жарияланым:


көлбеулік = (өлшем_макс − өлшем_мин) / (ен_макс − ен_мин)
ығысу     = өлшем_мин − көлбеулік × ен_мин
font-size: clamp(өлшем_мин, ығысу + көлбеулік × 100vw, өлшем_макс)

баспалдақ 0: 320 px-те 16 px → 1240 px-те 18 px
көлбеулік = 2 / 920 = 0,002174 → 0,2174vw
ығысу = 16 − 0,002174 × 320 = 15,304 px = 0,9565rem
font-size: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem)


Генераторда база мен коэффициентті әр шет үшін бөлек беруге болады — Utopia (utopia.fyi) осылай жұмыс істейді. Телефонда кішірек, десктопта үлкенірек коэффициент негізгі мәтінді іс жүзінде өзгертпейді, ал үлкен экранда тақырыптарды айқынырақ етеді. Барлық мәндер rem-мен жазылады, сондықтан шкала пайдаланушы таңдаған қаріп өлшемін ескереді.


Резеңке қаріптер және қолжетімділік


WCAG 1.4.4 критерийі мәтінді мазмұн жоғалмай 200 %-ға дейін үлкейтуге болуын талап етеді. Браузер масштабы rem мәндерін үлкейтеді, бірақ vw мәндерін емес, сондықтан экран еніне қатты тәуелді өлшем масштабтағанда екі есе өспеуі мүмкін. Резеңке типографиканы қауіпсіз ететін екі ереже:


    

  • Қалаулы мәнге әрдайым rem қосыңыз — ешқашан тек 5vw жазбаңыз. Генератор әрдайым rem + vw шығарады.
    • 

  • Максимум минимумнан 2,5 еседен аспасын. Максвелл Барвиан көрсеткендей (Smashing Magazine, 2023), clamp() ішіндегі ең үлкен өлшем ең кішісінен 2,5 еседен аспаса, мәтінді әрдайым 200 %-ға дейін үлкейтуге болады. Бұл ережені бұзатын баспалдақтар превью үстінде белгіленеді.
    • 

Өнім интерфейсіне баптауларды қалай таңдау керек
    

  • Негізгі мәтіннен бастаңыз. 16 px — браузердің әдепкі өлшемі және оқуға жақсы минимум; ұзын мәтіндерге десктопта жиі 17–18 px алады. Интерфейс жазулары мен кесте ұяшықтары −1 баспалдақты қолдана алады.
    • 

  • Баспалдақ санын шектеңіз. Көп өнімге базадан төмен екі және жоғары 4–5 баспалдақ жеткілікті. Өлшемдер көбейген сайын иерархия түсініктірек емес, шатасыңқы болады.
    • 

  • Кегль өскен сайын жол аралығын азайтыңыз. Негізгі мәтінге шамамен 1,5, ірі тақырыптарға 1,1–1,2; Tailwind экспортында әр баспалдаққа ұсынылған аралық бар.
    • 

  • Кішкентай экрандарда кіші коэффициент алыңыз. Телефонда 1,2 және десктопта 1,25–1,333 — өнім интерфейсіне сенімді жұп.
    • 

  • Интерфейстің қысқа мәтіндері де оқылуы тиіс. Тултиптерді, онбординг кеңестерін және чек-парақ тармақтарын кішкентай бұлтқа сыйдыру үшін жиі 12–13 px-пен теріп жібереді. Оларды −1 баспалдақтан кем етпей, мәтінді қысқартыңыз — тултипті оқу уақыты калькуляторы көмектеседі.
    • 

  • Контрастты ең ұсақ өлшемде тексеріңіз. Жіңішке қаріптер мен ұсақ кегльге көбірек контраст керек — жұптарды түс контрастын тексеру құралында тексеріңіз.
    • 

Дереккөздер
    

  1. Brown T. More Meaningful Typography. A List Apart, 2011 — вебке арналған модульдік шкалалар.
    2. 

  2. Bringhurst R. The Elements of Typographic Style. Hartley & Marks — классикалық типографиялық шкала және музыкалық интервалдар.
    3. 

  3. Utopia (utopia.fyi), J. Gilyead және T. Hill — тар және кең экранға әртүрлі коэффициенттері бар резеңке шкалалар.
    4. 

  4. Barvian M. Addressing Accessibility Concerns With Using Fluid Type. Smashing Magazine, 2023 — 200 % масштабқа арналған 2,5× ережесі.
    5. 

  5. W3C. WCAG 2.2, 1.4.4 «Мәтін өлшемін өзгерту» критерийі.
    6. 

  6. W3C. CSS Values and Units Module Level 4 — clamp(), rem және vw.
    7. 

Жиі қойылатын сұрақтар


Типографиялық шкалаға қай коэффициент жақсы?
Жалғыз дұрысы жоқ. Өнім интерфейстері мен құжаттамаға көбіне 1,2 (кіші терция) немесе 1,25 (үлкен терция), лендингтерге 1,333 не 1,414 алады. 1,5 және одан жоғары коэффициентте баспалдақтар аз болсын: өлшемдер өте тез өседі.
clamp() арқылы резеңке қаріп өлшемін қалай есептеуге болады?
Көлбеулікті табыңыз: (макс. өлшем − мин. өлшем) / (макс. ен − мин. ен). Ығысу = мин. өлшем − көлбеулік × мин. ен. Содан кейін clamp(мин. өлшем, rem-дегі ығысу + көлбеулік × 100 vw, макс. өлшем) жазыңыз. 320 px-те 16 px пен 1240 px-те 18 px үшін clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem) шығады.
Резеңке типографика қолжетімді ме?
Иә, егер қалаулы мән rem мен vw-ді біріктірсе және максималды өлшем минималдыдан 2,5 еседен аспаса. Сонда браузер масштабы WCAG 1.4.4 талабы бойынша мәтінді 200 %-ға дейін үлкейте алады. Тек vw-дегі өлшемдер масштабқа жауап бермейді — оларды қолданбаған жөн.
Қаріп өлшемін px-пен бе, rem-мен бе беру керек?
rem-мен. Ол пайдаланушының браузер баптауларында таңдаған қаріп өлшемін ескереді, ал px ескермейді. Генератор түсінікті болу үшін өлшемдерді px-пен көрсетеді, бірақ барлық CSS мәндерін rem-мен жазады, өзгертпесеңіз 1rem = 16 px деп санайды.
Дизайн-жүйеге қанша қаріп өлшемі керек?
Әдетте 6–8: жазулар мен белгілерге арналған негізгі мәтіннен төмен екі өлшем, негізгі өлшем және тақырыптардың 3–5 өлшемі. Баспалдақ көп болса, иерархия нашар қабылданады және жүйелі қолданылмайды.
Шкаланы Tailwind CSS-ке қалай қосуға болады?
Tailwind v3 үшін экспортты tailwind.config.js ішіндегі theme.extend.fontSize бөліміне қойып, text-step-2 не text-xl сияқты кластарды қолданыңыз. Tailwind v4 үшін @theme блогын CSS-ке қойыңыз: әр --text-* айнымалысы text-* утилитасына айналады.
«Өнім дизайны» бөлімінде тағы


Тақырып бойынша
Түс контрастын тексеруҚолжетімді палитра генераторыМәтіннің оқылуын тексеруБарлық құралдар
Әсері сандардан көрінетін турлар, тултиптер мен чек-парақтар.


Clew-ды тегін байқап көруҚалай жұмыс істейдіМәңгі тегін тариф · банк картасы қажет емес


Турлар, попаптар және ЖИ дәуіріндегі онбординг


Қадам саны, мәтін ережелері мен метрикалары бар 7 паттерн, ЖИ нені өзгертеді және жариялау алдындағы чек-лист. PDF, 2 бет. Ішінде не бар →














Нұсқаулық ағылшын тілінде.