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:
| Element | Grootte in rem | Grootte in px | Voorbeeldtekst |
|---|---|---|---|
| h1 | 2.986rem | 47.8px | The quick brown fox jumps over the lazy dog |
| h2 | 2.488rem | 39.8px | The quick brown fox jumps over the lazy dog |
| h3 | 2.074rem | 33.2px | The quick brown fox jumps over the lazy dog |
| h4 | 1.728rem | 27.6px | The quick brown fox jumps over the lazy dog |
| h5 | 1.440rem | 23.0px | The quick brown fox jumps over the lazy dog |
| h6 | 1.200rem | 19.2px | The quick brown fox jumps over the lazy dog |
| p | 1.000rem | 16.0px | The quick brown fox jumps over the lazy dog |
| eyebrow | 0.913rem | 14.6px | The quick brown fox jumps over the lazy dog |
| small | 0.833rem | 13.3px | The quick brown fox jumps over the lazy dog |
Groetjes,