Typography for everything
14 content types · 8 typographic traditions · drag & drop · import fonts · edit images · export CSS
- Pick a content type — concert poster, magazine cover, book page, business card...
- Get a professional layout — each type maps to a real typographic tradition with curated fonts, sizes, spacing, and hierarchy
- Drag to customize — every text block and image is draggable; click to edit font size, line height, letter spacing, alignment, color
- Import your assets — drop
.ttf/.otf/.woff2font files and images directly onto the canvas - Edit images — position, scale, brightness, contrast, saturation, blur, grayscale, opacity, 16 blend modes
- Export — copy CSS for any selected element
| Posters | Rock Concert · Classical Concert · Sports Event · Art Exhibition · Product Launch · Film Festival · Wedding | Swiss / Didone / New Wave / Minimalism / Constructivism |
| Editorial | Magazine Cover · Magazine Spread · Newspaper Front Page · Book Page | Editorial / News Design / Humanist |
| Tri-Fold Brochure · Business Card · Certificate · Restaurant Menu | Corporate Swiss / Minimalism / Copperplate |
All layouts support both portrait (800×1100) and landscape (1100×780) orientations.
Each layout is rooted in a real typographic movement:
- Swiss / International (Müller-Brockmann, 1950s) — grid, asymmetric, sans-serif
- Didone / Modern (Bodoni, Didot) — extreme thick/thin contrast, elegant
- New Wave / Postmodern (Weingart, Greiman) — dynamic, angled, energetic
- Old Style / Humanist (Garamond, Jenson) — warm, readable, scholarly
- Constructivism (Rodchenko, Lissitzky) — geometric, bold, revolutionary
- Minimalism (Rams, Japanese ma) — whitespace, precision, calm
- Editorial / News Design — multi-column, hierarchical, rhythmic
- Corporate Design (Vignelli) — clean, structured, systematic
| 14 content types | Posters, magazines, books, menus, business cards, certificates, brochures, newspapers... |
| 8 typographic traditions | Swiss, Didone, New Wave, Humanist, Constructivism, Minimalism, Editorial, Corporate |
| Drag & drop canvas | Every text block and image is draggable — reposition freely |
| Live text editing | Click any block → adjust font size, line height, letter spacing, alignment, color |
| Local font import | Drop .ttf / .otf / .woff2 files → auto @font-face injection |
| Image editing | Position, scale, brightness, contrast, saturation, blur, grayscale, opacity, 16 blend modes |
| Landscape + portrait | Magazine spreads, brochures, certificates use landscape; posters and books use portrait |
| CSS export | Copy production-ready CSS for any selected element |
| Dark mode | Follows system preference + manual toggle |
| Zero dependencies | No UI library, no backend — pure React + Tailwind |
Typography Lab is part of a five-tool open-source suite:
| Tool | What it does |
|---|---|
| Design Token Studio | Define design tokens — colors, typography, spacing — with WCAG checker and 6 export formats |
| CSS Visual Toolbox | Visually edit CSS properties (clip-path, gradients, shadows, border-radius). 8-framework export |
| Typography Lab ← you are here | Content-driven layout generator. 14 archetypes, 8 traditions |
| Motion Token Studio | Design motion tokens — cubic-bezier editor, duration scale, 12 presets, 5 export formats |
| Sound Garden | Real-time microphone → generative visual landscape (trees, waves, particles, circles) |
React 19 · TypeScript · Vite · Tailwind CSS v4 · React Router
MIT © 2026 lov-alt — Use freely, modify freely, distribute freely. Software provided "as is", without warranty of any kind.