§ 16

Skala typograficzna (skala modularna)

Jak duży powinien być nagłówek na mojej skali?

Odpowiedź: Skala typograficzna daje wszystkie rozmiary na stronie od jednej liczby podstawowej i jednego stosunku: tekst treści razy stosunek raz daje h4, dwa razy h3 i tak dalej. Więc h1 do small jest połączony zamiast być przypadkowymi liczbami. Wybierz rozmiar tekstu treści, stosunek i krok, i uzyskaj rozmiar w px i rem.

Wzór

Størrelse = brødtekst × forhold^trin

Trin 0 = brødtekst, positive trin er overskrifter, negative trin er småtekst

rem = px ÷ rod-størrelsen (normalt 16 px)

Symbole i jednostki we wzorze
Symbol	Znaczenie	Jednostka
basis_px	Rozmiar tekstu treści (krok 0)	px
forhold	Proporcja między stopniami	—
trin	Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small)	trin
rod_px	Rozmiar czcionki głównej (1 pas)	px
=	Rozmiar na tym stopniu	px
=	Rozmiar w paśmie	rem
=	Jeden krok niżej	px
=	Jeden krok wyżej	px

Ważność i źródło

Źródło: Skala modułowa · Tim Brown, «More Meaningful Typography» (A List Apart 2011)

Nie dotyczy, gdy

Proporcje pochodzą z muzycznych interwałów, które zaproponował Tim Brown. Na urządzeniach mobilnych często stosuje się mniejszą proporcję niż na komputerach stacjonarnych, ponieważ w przeciwnym razie górne wiersze byłyby zbyt duże dla ekranu.

Przykład obliczeniowy

Wstawiono domyślne wartości kalkulatora. Liczby obliczono dokładnie tym wzorem, którego używa narzędzie.

Wstawiono

Rozmiar tekstu treści (krok 0)16 px
Proporcja między stopniami1,25
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small)4 trin
Rozmiar czcionki głównej (1 pas)16 px

Dawca

Rozmiar na tym stopniu39,1 px
Rozmiar w paśmie2,441 rem
Jeden krok niżej31,3 px
Jeden krok wyżej48,8 px

Tylko dla członków

Sam kalkulator jest zablokowane

Utwórz bezpłatne konto, aby odblokować wszystkie artykuły, kalkulatory, szablony i asortyment — i uzyskać dostęp do quizów i klas. Zajmuje to poniżej minuty: imię, email i hasło. Żadna karta kredytowa.

Utwórz darmowe konto →Zaloguj się

Chcesz najpierw czegoś spróbować? Zobacz, czego możesz używać bez konta — strefa junior, leksykon, filmy i więcej.

Sådan bruger du den

Når du sætter typografien op i et nyt projekt, giver en modulær skala alle størrelser fra h1 til small ét fælles forhold. Så ser hierarkiet bevidst ud, og nye størrelser kan findes uden at gætte. Beregneren giver størrelsen på et trin og trinnene lige over og under.

Krok za krokiem

Vælg brødtekstens størrelse, typisk 16-18 px. Det er trin 0.
Vælg forholdet. Små forhold (1,125-1,2) til tekstsider, store (1,333-1,618) til kampagner og forsider.
Gang brødteksten med forholdet én gang pr. trin opad. Del med forholdet for hvert trin nedad.
Omregn til rem, og læg størrelserne i CSS-variabler, fx --step-1 til --step-4.

Typowe błędy

At runde hvert trin og gange videre med det rundede tal. Regn hvert trin fra brødteksten, og rund kun til sidst.
At bruge et stort forhold på mobil. h1 med 1,618 på trin 4 bliver over 100 px.
At lade linjehøjden stå fast. Store overskrifter skal have lavere linjehøjde (ca. 1,1-1,2) end brødtekst (ca. 1,5).

Przykłady z codzienności

h1 i et designsystem

Et kommunalt site har brødtekst på 16 px og bruger «stor terts» (1,25). h1 er trin 4.

Rozmiar tekstu treści (krok 0): 16 px
Proporcja między stopniami: 1,25 · duża tercja
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small): 4 Stopień
Rozmiar czcionki głównej (1 pas): 16 px

To znaczy: h1 bliver 39,1 px (2,441 oczep). Trinnet under (h2) er 31,3 px.

Småtekst på en tekstside

En nyhedsside har brødtekst på 18 px og en «lille terts» (1,2). Billedtekster skal være ét trin under.

Rozmiar tekstu treści (krok 0): 18 px
Proporcja między stopniami: 1,2 · mała tercja
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small): -1 Stopień
Rozmiar czcionki głównej (1 pas): 16 px

To znaczy: Billedteksten bliver 15 px, altså 0,938 oczep. Det er læseligt og tydeligt mindre end brødteksten.

Stor overskrift på en landingsside

En landingsside for en app vil have store kontraster med det gyldne snit (1,618) og en hero-overskrift på trin 3.

Rozmiar tekstu treści (krok 0): 16 px
Proporcja między stopniami: 1,618 · złoty podział (duże kontrasty)
Trin på skalaen (fx 4 = h1, 3 = h2, −1 = small): 3 Stopień
Rozmiar czcionki głównej (1 pas): 16 px

To znaczy: Overskriften bliver 67,8 px. Det er for stort til en telefon, så kombinér med clamp() og et mindre forhold på mobil.

Reguła praktyczna

Med 1,25 bliver hvert andet trin ca. 1,56 gange større, og fire trin giver lidt under 2,5 gange brødteksten.

Jak sprawdzić odpowiedź

Del trinnet over med trinnet under. Det skal give forholdet i anden potens.