Generator skali typograficznej z płynnym clamp() w CSS | We.Inc
Wygeneruj modularną skalę typograficzną z rozmiaru bazowego i proporcji, z płynnymi wartościami clamp() dla każdego stopnia, podglądem na żywo i zmiennymi CSS lub Tailwind do skopiowania.
Generator skali typograficznej
Skala typograficzna mnoży bazowy rozmiar czcionki przez jedną proporcję raz za razem, więc każdy rozmiar nagłówka jest powiązany z tekstem głównym. Wybierz bazę i proporcję dla telefonów oraz drugą parę dla komputerów; ten generator zamienia każdy stopień w wartość clamp() w rem i vw, która płynnie rośnie między tymi dwiema szerokościami.
Popularne proporcje i do czego pasują
Proporcja
Wartość
Charakter
Sekunda mała
Gęste aplikacje, dashboardy
Sekunda wielka
Gęste aplikacje, dashboardy
Tercja mała
Artykuły, strony marketingowe
Tercja wielka
Artykuły, strony marketingowe
Kwarta czysta
Artykuły, strony marketingowe
Kwarta zwiększona
Plakaty, wyraziste landing pages
Kwinta czysta
Plakaty, wyraziste landing pages
Złoty podział
Plakaty, wyraziste landing pages
Większość narzędzi do skali typograficznej daje jeden stały zestaw rozmiarów. To narzędzie daje dwa, skalę dla małych ekranów i skalę dla dużych ekranów, i łączy je przez clamp(), więc wdrażasz jedną regułę na stopień zamiast stosu media queries.
Dlaczego dwie proporcje
Proporcja, która wygląda okazale na monitorze o szerokości 1440 pikseli, sprawia, że nagłówki na telefonie łamią się na cztery linie. Ciaśniejsza proporcja na małych ekranach, na przykład 1.2, i szersza na dużych, na przykład 1.25 lub 1.333, utrzymuje mocne nagłówki na komputerze i czytelne na telefonie.
Stopnie poniżej zera działają tak samo, tylko odwrotnie: baza jest dzielona przez proporcję, co daje rozmiary podpisów i drobnego druku zachowujące proporcje.
Jak obliczane są wartości clamp()
Dla każdego stopnia narzędzie zna rozmiar przy małej i przy dużej szerokości. Prowadzi prostą między tymi dwoma punktami: nachylenie staje się częścią vw, a przesunięcie początkowe częścią rem wartości preferowanej.
clamp(min, preferred, max) utrzymuje następnie rozmiar na minimum poniżej małej szerokości i na maksimum powyżej dużej. Domieszka rem w wartości preferowanej ma znaczenie: rozmiar wyłącznie w vw ignoruje powiększenie w przeglądarce, a część rem nadal rośnie, gdy ktoś powiększa stronę.
MDN zaleca, aby przy ustawianiu rozmiaru tekstu przez clamp() maksimum było co najmniej dwa razy większe od minimum, tak aby tekst mógł osiągnąć powiększenie 200 procent, czyli poziom zmiany rozmiaru z WCAG 1.4.4. Umiarkowany płynny zakres sam tego nie spełni, więc przetestuj największe stopnie przy powiększeniu przeglądarki do 200 procent.
Ustaw główny rozmiar czcionki (16, chyba że Twój CSS zmienia rozmiar html) oraz wąską i szeroką szerokość viewportu.
Wybierz rozmiar bazowy i proporcję dla każdego końca. Takie same wartości dają stałą skalę; różne dają płynną.
Wybierz, ile stopni powyżej i poniżej bazy potrzebujesz. Większość stron używa czterech lub pięciu powyżej i jednego lub dwóch poniżej.
Przesuń suwak szerokości podglądu, aby zobaczyć każdy stopień przy dowolnym rozmiarze ekranu, a potem skopiuj zmienne CSS lub blok motywu Tailwind.
Zacznij tekst główny od 16 do 18 pikseli; mniejszy utrudnia długie czytanie na telefonach.
Zmniejszaj interlinię wraz ze wzrostem rozmiaru: około 1.5 dla tekstu głównego i 1.1 do 1.2 dla dużych nagłówków wygląda proporcjonalnie.
Rzadko potrzebujesz więcej niż sześciu stopni. Jeśli dwa stopnie wyglądają w podglądzie niemal tak samo, usuń jeden.
Nazywaj zmienne według stopnia, a nie elementu (step-3 zamiast h2), aby tytuł karty mógł pożyczyć rozmiar nagłówka bez zamieszania.
Najczęściej zadawane pytania
Jaka proporcja skali typograficznej jest dobra?
Dla stron z dużą ilością tekstu bezpiecznym wyborem są 1.2 (tercja mała) lub 1.25 (tercja wielka). 1.333 (kwarta czysta) pasuje do stron marketingowych z krótkimi, wyrazistymi nagłówkami. Proporcje 1.5 i wyższe dają duże skoki, które sprawdzają się na plakatach, ale szybko tworzą ogromne nagłówki.
Czy złoty podział dobrze sprawdza się w typografii?
Przy wartości około 1.618 jest bardzo stromy: pięć stopni powyżej 16px przekracza już 170px. Może działać w dwu lub trzystopniowej skali display, ale większość interfejsów czyta się lepiej z mniejszą proporcją.
Dlaczego rem plus vw zamiast samego vw?
Tekst o rozmiarze wyłącznie w vw nie reaguje na powiększenie tekstu w przeglądarce, co zawodzi osoby powiększające tekst. Część rem w wartości preferowanej utrzymuje działanie powiększenia, a vw odpowiada za płynny wzrost między szerokościami.
Czy mogę użyć wyniku z Tailwind CSS?
Tak. Tailwind v4 tworzy klasę narzędziową text-* z każdej zmiennej --text-* wewnątrz bloku @theme, więc wklejenie wyniku dla Tailwind daje Ci w kodzie klasy takie jak text-step-2.
Użycie skali w Twoim CSS
Przykład: baza 16px przy 375px rosnąca do 18px przy 1280px, proporcja 1.2 rosnąca do 1.25.
Stopnie jako custom properties
Każdy stopień to jedno clamp(). Zastosuj je do elementów lub klas narzędziowych, wraz z interlinią dla każdego stopnia.
Wynik na żywo
Te same zmienne na małej stronie. Edytuj kod, aby wypróbować inne wartości; ramka jest wąska, więc widzisz wersję dla małych ekranów.
Nazwy proporcji i dokładne wartości
Muzyczne nazwy pochodzą od stosunków częstotliwości interwałów; każda wartość to dokładny ułamek zaokrąglony do trzech miejsc.
Nazwane proporcje
Nazwa
Ułamek
Wartość
Pięć stopni powyżej 16px
Sekunda mała
Sekunda wielka
Tercja mała
Tercja wielka
Kwarta czysta
Kwarta zwiększona
Kwinta czysta
Złoty podział
Zbuduj swoją skalę
Ustaw rozmiar bazowy i proporcję dla małego i dla szerokiego ekranu. Każdy stopień otrzymuje wartość clamp(), która płynnie rośnie między tymi szerokościami, a do tego podgląd na żywo i CSS do skopiowania.