Generador

Tamaños Tipográficos

Lista de tamaños tipográficos

* Ingresa los tamaños separados por coma.

Vista previa del texto

Don't Repeat Yourself

Como usar:

<h2 class="fs-12 fs-md-32">Don't Repeat Yourself</h2>

Tokens


:root {
--fs-42:2.625rem;
--fs-32:2rem;
--fs-24:1.5rem;
--fs-20:1.25rem;
--fs-18:1.125rem;
--fs-16:1rem;
--fs-14:0.875rem;
--fs-12:0.75rem;

}

.fs-42 {
 font-size:var(--fs-42);
}
.fs-32 {
 font-size:var(--fs-32);
}
.fs-24 {
 font-size:var(--fs-24);
}
.fs-20 {
 font-size:var(--fs-20);
}
.fs-18 {
 font-size:var(--fs-18);
}
.fs-16 {
 font-size:var(--fs-16);
}
.fs-14 {
 font-size:var(--fs-14);
}
.fs-12 {
 font-size:var(--fs-12);
}

  
@media(width>=768px) {
 .fs-md-42 {
 font-size:var(--fs-42);
 }
.fs-md-32 {
 font-size:var(--fs-32);
 }
.fs-md-24 {
 font-size:var(--fs-24);
 }
.fs-md-20 {
 font-size:var(--fs-20);
 }
.fs-md-18 {
 font-size:var(--fs-18);
 }
.fs-md-16 {
 font-size:var(--fs-16);
 }
.fs-md-14 {
 font-size:var(--fs-14);
 }
.fs-md-12 {
 font-size:var(--fs-12);
 }

}