TypeStax: Een type scale generator met het gevoel van vintage audiohardware

TypeStax, gebouwd door rahulmax, is bedoeld voor het creëren van harmonieuze type stacks. De tool biedt functies zoals het bladeren door lettertypecombinaties, het delen en het exporteren van resultaten.

Configuratie en Instellingen

De tool biedt uitgebreide mogelijkheden om de typografie aan te passen:

Algemene instellingen

  • Base Size (Basisgrootte): Standaard ingesteld op 16px.
  • Scale (Schaal): Diverse schaalopties zoals m2, M2, m3, M3, P4, A4, P5 en φ.

Instellingen voor Koppen (Headings)

Voor de koppen kunnen de volgende parameters worden aangepast:

  • Font Weight (Letterdikte): Variërend van 100 tot 700 (standaard 700).
  • Line Height (Regelafstand): Variërend van 0.8 tot 1.20 (standaard 1.20).
  • Letter Spacing (Letterafstand): Variërend van -0.100em tot -0.020em (standaard -0.020em).
  • Word Spacing (Woordafstand): Variërend van -0.10em tot 0.00em (standaard 0.00em).

Instellingen voor Bodytekst

Voor de hoofdtekst kunnen de volgende parameters worden aangepast:

  • Font Weight (Letterdikte): Variërend van 100 tot 400 (standaard 400).
  • Line Height (Regelafstand): Variërend van 0.8 tot 1.60 (standaard 1.60).
  • Letter Spacing (Letterafstand): Variërend van -0.100em tot 0.000em (standaard 0.000em).
  • Word Spacing (Woordafstand): Variërend van -0.10em tot 0.00em (standaard 0.00em).

Overige aanpassingen

  • Per-Element Overrides: Specifieke aanpassingen mogelijk voor h1, h2, h3, h4, h5, h6, p, e en s.
  • Kleuren: Instellingen voor Head, Body en BG (achtergrond), inclusief een Random/Swap functie en contrastinstellingen (Contrast AA 0-8).
  • Visuele opties: Keuze uit achtergrondpatronen (Background Pattern) en aanpassing van de Opacity (doorzichtigheid) van 0% tot 100%.
  • Spacing: Aanpasbare witruimte in pixels.

Mobiele instellingen

Voor mobiele weergaven zijn er specifieke parameters:

  • Base Size: Variërend van 10px tot 15px (standaard 15px).
  • Scale Ratio: Variërend van 1.1 tot 1.15 (standaard 1.15).

Type Scale Overzicht

Op basis van de instellingen genereert de tool de volgende waarden:

ElementGrootte in remGrootte in pxVoorbeeldtekst
h12.986rem47.8pxThe quick brown fox jumps over the lazy dog
h22.488rem39.8pxThe quick brown fox jumps over the lazy dog
h32.074rem33.2pxThe quick brown fox jumps over the lazy dog
h41.728rem27.6pxThe quick brown fox jumps over the lazy dog
h51.440rem23.0pxThe quick brown fox jumps over the lazy dog
h61.200rem19.2pxThe quick brown fox jumps over the lazy dog
p1.000rem16.0pxThe quick brown fox jumps over the lazy dog
eyebrow0.913rem14.6pxThe quick brown fox jumps over the lazy dog
small0.833rem13.3pxThe quick brown fox jumps over the lazy dog