Echelle typographique

Generez une echelle typographique responsive a partir d'une taille de base et d'un ratio. Export CSS variables, clamp() fluid et config Tailwind.

Scale Presets

Base: 16px

Ratio: 1.250

Fluid (clamp)

Sample text

6xl

The quick brown fox

5xl

The quick brown fox

4xl

The quick brown fox

3xl

The quick brown fox

2xl

The quick brown fox

base

The quick brown fox

Name	px	rem	Factor
xs	10.24	0.640	×0.64
sm	12.8	0.800	×0.80
base	16	1.000	×1.00
lg	20	1.250	×1.25
xl	25	1.563	×1.56
2xl	31.25	1.953	×1.95
3xl	39.06	2.441	×2.44
4xl	48.83	3.052	×3.05
5xl	61.04	3.815	×3.81
6xl	76.29	4.768	×4.77

Show Tailwindbase: 16pxratio: 1.25

CSS Variables

:root {
  --font-size-xs: 0.640rem;
  --font-size-sm: 0.800rem;
  --font-size-base: 1.000rem;
  --font-size-lg: 1.250rem;
  --font-size-xl: 1.563rem;
  --font-size-2xl: 1.953rem;
  --font-size-3xl: 2.441rem;
  --font-size-4xl: 3.052rem;
  --font-size-5xl: 3.815rem;
  --font-size-6xl: 4.768rem;
}

Tailwind Config

// tailwind.config
fontSize: {
  'xs': '0.640rem',
  'sm': '0.800rem',
  'base': '1.000rem',
  'lg': '1.250rem',
  'xl': '1.563rem',
  '2xl': '1.953rem',
  '3xl': '2.441rem',
  '4xl': '3.052rem',
  '5xl': '3.815rem',
  '6xl': '4.768rem',
}

Explorer d'autres Goodies

D'autres outils gratuits par Eguth Studio qui pourraient vous plaire.

Voir tous les Goodies

Layout

Generateur de grilles CSS

Construisez des grilles CSS visuellement. Ajustez colonnes, lignes et espacements, puis copiez le code.

Try it ->

Layout

Previsualisation border-radius

Visualisez et ajustez des valeurs complexes de border-radius sur un apercu en direct.

Try it ->

Layout

Flexbox Playground

Construisez des layouts flexbox visuellement. Controlez direction, justify, align, wrap, gap et les proprietes de chaque item.

Try it ->

NewLayout

Generateur de systeme d'espacement

Construisez une echelle d'espacement coherente a partir d'une unite de base. Generez des echelles lineaires, geometriques ou Fibonacci avec CSS variables et config Tailwind.

Try it ->

NewLayout

CSS Transform Playground

Combinez des transforms CSS 2D et 3D visuellement — translate, rotate, scale, skew et perspective avec apercu en direct et controle du transform-origin.

Calculateur Clamp

Generez des valeurs CSS clamp() responsives pour la typographie et l'espacement fluides. Definissez viewport et valeurs min/max, previsualisation a chaque breakpoint.

Try it ->

Voir tous les Goodies