D-OPEN
Accueil/Outils/Calculateur de Grille Typographique

Calculateur de Grille Typographique

Creez une echelle typographique harmonieuse basee sur des ratios mathematiques. Visualisez les tailles, calculez les interlignages et exportez en CSS, SCSS ou Tailwind.

Parametres

px

Taille du texte de paragraphe (body). Standard : 16px.

Ratio d'echelle

Echelle calculee

Ratio :1.2
NiveaupxremLine-heightEchelle
Small

Texte secondaire, captions, labels

21.33px
Body

Texte de paragraphe, contenu principal

25.6px
H6

Sous-titre mineur, legende

26.88px
H5

Sous-titre de section

31.1px
H4

Titre de composant, widget

35.94px
H3

Titre de section

41.47px
H2

Titre principal de section

47.78px
H1

Titre de page, hero

54.94px

Apercu en direct

H1

Titre principal

H2

Titre de section

H3

Sous-titre important

H4

Titre de composant

H5

Sous-titre de section

H6

Sous-titre mineur

Body

Le design est l art de resoudre des problemes visuels.

Small

Le design est l art de resoudre des problemes visuels.

Rythme vertical

Le rythme vertical consiste a aligner les elements sur une grille de base. Avec une taille de 16px et un interlignage body de 25.6px, votre unite de base est de 25.6px.

Titre de section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Exporter l'echelle

/* Typographic Scale */
/* Base: 16px | Ratio: 1.2 */
/* Minor Third */

:root {
  --font-size-base: 16px;
  --type-ratio: 1.2;

  /* Small - Texte secondaire, captions, labels */
  --font-size-small: 0.833rem; /* 13.33px */
  --line-height-small: 1.333rem; /* 21.33px */

  /* Body - Texte de paragraphe, contenu principal */
  --font-size-body: 1rem; /* 16px */
  --line-height-body: 1.6rem; /* 25.6px */

  /* H6 - Sous-titre mineur, legende */
  --font-size-h6: 1.2rem; /* 19.2px */
  --line-height-h6: 1.68rem; /* 26.88px */

  /* H5 - Sous-titre de section */
  --font-size-h5: 1.44rem; /* 23.04px */
  --line-height-h5: 1.944rem; /* 31.1px */

  /* H4 - Titre de composant, widget */
  --font-size-h4: 1.728rem; /* 27.65px */
  --line-height-h4: 2.246rem; /* 35.94px */

  /* H3 - Titre de section */
  --font-size-h3: 2.074rem; /* 33.18px */
  --line-height-h3: 2.592rem; /* 41.47px */

  /* H2 - Titre principal de section */
  --font-size-h2: 2.488rem; /* 39.81px */
  --line-height-h2: 2.986rem; /* 47.78px */

  /* H1 - Titre de page, hero */
  --font-size-h1: 2.986rem; /* 47.78px */
  --line-height-h1: 3.434rem; /* 54.94px */

}

/* Usage classes */
.text-small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.text-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.text-h6 {
  font-size: var(--font-size-h6);
  line-height: var(--line-height-h6);
}

.text-h5 {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
}

.text-h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.text-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.text-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

.text-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
}

Besoin d'un systeme typographique complet ?

Cet outil vous aide a definir les bases de votre echelle typographique. Pour un design system complet incluant composants, espacement, couleurs et guidelines, nos experts UI/UX sont la pour vous accompagner.

Demander un design systemVoir nos autres outils