Hierarchia Rozmiarów Czcionek

Zachowana skala typograficzna dla nagłówków, ciała tekstu i napisów opisowych

Użyj modulowej skali z zakresu 1,2–1,25 do osiągnięcia równych kroku. Podstawowy tekst ciała = 16px.

Preferuj czytelność nad dramatycznymi skokami; utrzymaj H1 ≤ 2,5 razy większy od podstawowego tekstu, aby uniknąć zanurzenia hierarchii.

Odpowiednie Adjustments

Na urządzeniach mobilnych zmniejsz H1–H3 o około 12–16%: H1 34px, H2 28px, H3 22px. Trzymaj ciało na minimum 16px; mały 14px.

Zachowaj przekaz linii 1,4–1,6 dla nagłówków; 1,65–1,8 dla ciała.

demo na żywo · powiązana symulacja● LIVE

Nagłówki powinny być krótkie (≤2 linii) aby zachować jasność hierarchii.

Użyj rozdrobnienia liter -0,01em dla H1–H3 aby przybliżyć dużą tekstę.

Nie używaj małej tekstury dla interaktywnych kontrolek.

Często zadawane pytania

Co jest najmniejszą zalecanej wielkości czcionki dla tekstu głównago, a dlaczego powinienem unikać wstawiania tekstu w obrazach?

Najmniejsza zalecana wielkość czcionki dla tekstu głównago to 16px, aby zapewnić czytelność. Unikanie wstawiania tekstu w obrazy pomaga utrzymać odpowiednią kontrastowość z tłem i zachować odpowiednie długości linii (około 55 do 80 znaków) dla komfortowego czytania.

Co to są tokeny ekspozycji, takie jak `--font-size-h1: 40px;`, a jak powinienem je używać?

Tokeny ekspozycji, takie jak `--font-size-h1: 40px;` i `--font-size-body: 16px;`, to rekwizytowe wartości, które upraszczają zarządzanie wielkościami czcionek. Możesz przypisywać te tokeny do stylów tekstu w narzędziach takich jak Figma lub używać zmiennych CSS z `clamp()` do dynamicznego skalowania.

Ostatnia aktualizacja: 2024 | System Projektowy?

Ostatnia aktualizacja tego systemu projektowego miała miejsce w 2024 roku. Ta informacja pokazuje bieżącą wersję dokumentacji i przepisów.

▶ Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Hash Function Avalanche Visualizer i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.

▶ Otwórz symulację Hash Function Avalanche Visualizer