Przejdź do treści

Skala typograficzna

Hvilken skriftstørrelse skal mit H2/H3/label have, hvis min brødtekst er 16px?

Odpowiedź: Beregneren udregner den næste skriftstørrelse i en modulær typografisk skala, hvor hvert trin er et fast forhold gange det foregående — den metode UI- og webdesignere bruger til at skabe et konsistent størrelseshierarki mellem overskrifter, brødtekst og labels. Den erstatter ikke en fuld typografisk designguide, men giver de matematisk konsistente basisværdier.

Wzór

Trin-størrelse = grundstørrelse × forholdⁿ, hvor n = antal trin op i skalaen.

De navngivne forhold (major third, perfect fourth, gyldne snit m.fl.) stammer fra klassiske musikalske intervalforhold og er den mest udbredte metode til modulære typografiske skalaer, jf. Tim Brown: 'More Meaningful Typography' (A List Apart).

Symbole i jednostki we wzorze
SymbolZnaczenieJednostka
grundstoerrelse_pxGrundstørrelse (brødtekst)px
forholdSkalaforhold—
trinAntal trin op i skalaentrin
=Skriftstørrelsepx
=Skriftstørrelse i remrem

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

Źródło
Modulær typografisk skala (Tim Brown, 'More Meaningful Typography' — A List Apart)

Przykład obliczeniowy

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

Wstawiono

  • Grundstørrelse (brødtekst)16 px
  • Skalaforhold1,25
  • Antal trin op i skalaen3 trin

Dawca

  • Skriftstørrelse31,3 px
  • Skriftstørrelse i rem1,953 rem

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.

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 laver titler, undertekster og interface-tekst til en animation eller en app, giver en modulær skala et ensartet hierarki. Beregneren ganger grundstørrelsen med skalaforholdet et antal trin op.

Krok za krokiem

  1. Vælg grundstørrelsen, typisk brødteksten.
  2. Vælg skalaforholdet: lavt til interfaces, højt til titler med stor kontrast.
  3. Gang grundstørrelsen med forholdet opløftet i antal trin.
  4. Brug tallet til overskrifter og titler, og rund til hele pixels.

Typowe błędy

  • At vælge et forhold, der er så højt, at titlerne ikke kan være på skærmen.
  • At blande to skalaer i samme produkt.

Przykłady z codzienności

Overskrift i en app

Et UI i en AR-app har brødtekst på 16 px, og du bruger major third (1,25). Overskriften skal ligge 3 trin op.

Grundstørrelse (brødtekst)
16 px
Skalaforhold
Major third (1,25) — UI/interfaces
Antal trin op i skalaen
3 Stopień

To znaczy: Overskriften bliver 31,3 px, eller 1,953 oczep.

Titel i en motion graphic

En titel i en explainer-video skal være markant. Grundstørrelsen er 24 px, og du bruger perfect fifth (1,5) 4 trin op.

Grundstørrelse (brødtekst)
24 px
Skalaforhold
Perfect fifth (1,5) — dramatisk hierarki
Antal trin op i skalaen
4 Stopień

To znaczy: Titlen bliver 121,5 px.

Reguła praktyczna

Major third (1,25) fordobler størrelsen på ca. 3 trin.

Jak sprawdzić odpowiedź

Hvert trin skal være forholdet gange det forrige.