Generator skali typograficznej

Czym jest Generator skali typograficznej?

Generator skali typograficznej zamienia rozmiar bazowy i proporcję modularną w kompletną, matematycznie spójną skalę typograficzną, z dowolną liczbą większych kroków nagłówkowych i mniejszych kroków podpisów. Poza samymi rozmiarami czcionki wyprowadza dopasowaną interlinię i światło międzyliterowe dla każdego kroku, a także opcjonalne płynne wyrażenie clamp(), które interpoluje między viewportem mobilnym a desktopowym, używając osobnej proporcji mobilnej. Projektanci i programiści front-end używają go do tworzenia tokenów typograficznych systemu projektowego, utrzymywania spójnych rozmiarów i wklejania gotowego CSS, Sass, Tailwind lub JSON. Wpisz dowolną własną proporcję lub wybierz klasyczną, ustaw rozmiar bazowy i jednostkę (px lub rem), zobacz podgląd we własnej font-family i skopiuj potrzebny format.

Jak używać Generator skali typograficznej

1. Wpisz dowolną własną proporcję w polu proporcji lub wybierz klasyczną, jak kwarta czysta (1.333), z listy ustawień wstępnych w ustawieniach.
2. Ustaw rozmiar bazowy; staje się on rozmiarem tekstu podstawowego i kotwicą skali.
3. W ustawieniach wybierz, ile większych i mniejszych kroków wygenerować; mniejsze kroki leżą poniżej bazy dla podpisów i drobnego druku.
4. Dostrój interlinię bazową i ciasną oraz światło międzyliterowe przy dużych rozmiarach i podaj font-family, aby zobaczyć podgląd skali we własnym kroju.
5. Dla typografii responsywnej ustaw minimalną i maksymalną szerokość viewportu oraz proporcję mobilną, aby zbudować płynną skalę clamp().
6. Przełączaj format wyjściowy między zmiennymi CSS, płynnym clamp(), Sass, konfiguracją Tailwind i JSON, a następnie skopiuj kod lub rozmiar pojedynczego kroku.

Przykłady

proporcja 1.333, baza 16px, 5 w górę / 1 w dół

--font-size-2xl: 37.897px; --line-height-2xl: 1.27; --letter-spacing-2xl: -0.017em;

baza 16px, proporcja 1.333, proporcja mobilna 1.2, 320-1240px

--font-size-2xl: clamp(27.648px, 24.083px + 1.114vw, 37.897px);

dowolna skala, eksport Tailwind

fontSize: { base: ['16px', { lineHeight: '1.5', letterSpacing: '0em' }] }

Najczęściej zadawane pytania

Czy mogę użyć własnej proporcji, a nie tylko ustawień wstępnych?

Tak. Wpisz dowolną liczbę w polu proporcji, na przykład 1.2, 1.5, 1.618 lub niestandardową wartość jak 1.45. Lista ustawień wstępnych w ustawieniach to tylko skrót wypełniający to samo pole, a wybranie wartości niepasującej do ustawienia wstępnego po prostu pokazuje Własna.

Jak działają mniejsze (ujemne) kroki?

Skala jest zakotwiczona na rozmiarze bazowym (krok 0). Większe kroki mnożą bazę przez proporcję, a mniejsze dzielą, tworząc poniżej bazy rozmiary podpisów i drobnego druku, takie jak sm i xs. Ustaw w ustawieniach, ile większych i mniejszych kroków chcesz.

Jak obliczane są interlinia i światło międzyliterowe?

Interlinia przechodzi od Twojej wartości bazowej przy rozmiarze tekstu do ciaśniejszej wartości w miarę powiększania się tekstu, a światło przechodzi od zera przy bazie do Twojej wartości dla dużych rozmiarów, więc duży tekst wyświetlany jest nieco ciaśniejszy, a mały nieco luźniejszy. Obie krzywe można regulować w ustawieniach.

Czym jest płynna skala clamp()?

Tworzy dla każdego kroku font-size: clamp(), który płynnie rośnie między minimalną a maksymalną szerokością viewportu, używając głównej proporcji przy maksymalnej szerokości i osobnej proporcji mobilnej przy minimalnej. Wybierz format wyjściowy CSS clamp(), aby ją wyeksportować.

Czy jakiekolwiek moje dane są wysyłane na serwer?

Nie. Cała skala, w tym rozmiary, interlinia, światło i płynne wartości clamp(), jest liczona lokalnie w Twojej przeglądarce za pomocą prostej arytmetyki. Nic nie jest przesyłane, więc narzędzie działa offline i zachowuje prywatność Twoich ustawień.