A typographic scale builder with CSS token export. Built for UI engineers and design system authors.
Features: PWA with offline support, i18n, URL-synced state, keyboard shortcuts.
Live on Render: https://typometer.lotva.ru/
Start the dev server:
pnpm install
pnpm devBuild and preview a static production bundle:
pnpm generate
pnpm previewUpdate dependencies:
pnpx npm-check-updates
pnpm installInstall skills:
pnpx skills add addyosmani/web-quality-skills
pnpx skills add vuejs-ai/skills| Category | Technologies |
|---|---|
| Framework | TypeScript, Vue 3, Nuxt 4, Pinia |
| UI | PostCSS, Ark UI |
| Linting | Prettier, Stylelint, Oxlint, Commitlint |
| Tooling | Rolldown, Lefthook, pnpm |
Architecture: FEOD.
The codebase is organized into core, pages, views, modules, and common directories.
Each directory is divided into config, lib, model, and ui segments.
The typographic scale — Spencer Mortensen
Building Typographic Scales in CSS with :heading(), sibling-index(), and pow() — Always Twisted
CSS Type Casting to Numeric: tan(atan2()) Scalars — Jane Ori
Every Layout: Modular scale — Heydon Pickering & Andy Bell
Fluid heading styles — Carbon Design System
How to name design tokens — The Design System Guide
Modular grid — Kontur Guides
Typemetric — Profi.Travel Design Guide
Font size ratios — Sergey Steblina
Конструктор типографической шкалы с экспортом в CSS-токены. Адресован разработчикам интерфейсов и авторам дизайн-систем.
Фичи: PWA и работа в офлайне, i18n, синхронизация состояния и URL, хоткеи.
Задеплоен на Render: https://typometer.lotva.ru/
Запустить дев-сервер:
pnpm install
pnpm devСобрать и развернуть локально статический билд:
pnpm generate
pnpm previewОбновить зависимости:
pnpx npm-check-updates
pnpm installПодключить скиллы:
pnpx skills add addyosmani/web-quality-skills
pnpx skills add vuejs-ai/skills| Категория | Технологии |
|---|---|
| Фреймворк | TypeScript, Vue 3, Nuxt 4, Pinia |
| Интерфейс | PostCSS, Ark UI |
| Линтеры | Prettier, Stylelint, Oxlint, Commitlint |
| Тулинг | Rolldown, Lefthook, pnpm |
Архитектурная методология — FEOD. Код поделён на директории core, pages, views, modules и common; директории поделены на сегменты config, lib, model, ui.
The typographic scale. Spencer Mortensen
Building Typographic Scales in CSS with :heading(), sibling-index(), and pow(). Always Twisted
CSS Type Casting to Numeric: tan(atan2()) Scalars. Jane Ori
Every Layout: Modular scale. Heydon Pickering, Andy Bell
Fluid heading styles. Carbon Design System
How to name design tokens. The Design System Guide
Модуль. Гайды «Контура»
Типометрия. Гайды «Профи-трэвел»
Соотношение кеглей. Сергей Стеблина