Typography Scale Generator

Configuration

Type Scale Preview

Scale Details

:root {
  --text-xs: 0.563rem;
  --leading-xs: 1.6;
  --tracking-xs: 0.025em;
  --text-sm: 0.750rem;
  --leading-sm: 1.5;
  --tracking-sm: 0;
  --text-base: 1rem;
  --leading-base: 1.5;
  --tracking-base: 0;
  --text-lg: 1.333rem;
  --leading-lg: 1.4;
  --tracking-lg: -0.01em;
  --text-xl: 1.777rem;
  --leading-xl: 1.3;
  --tracking-xl: -0.02em;
  --text-2xl: 2.369rem;
  --leading-2xl: 1.2;
  --tracking-2xl: -0.02em;
  --text-3xl: 3.157rem;
  --leading-3xl: 1.2;
  --tracking-3xl: -0.03em;
  --text-4xl: 4.209rem;
  --leading-4xl: 1.2;
  --tracking-4xl: -0.03em;
  --text-5xl: 5.610rem;
  --leading-5xl: 1.2;
  --tracking-5xl: -0.03em;
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
  letter-spacing: var(--tracking-xs);
  font-weight: 400;
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
  letter-spacing: var(--tracking-sm);
  font-weight: 400;
}

.text-base {
  font-size: var(--text-base);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  font-weight: 400;
}

.text-lg {
  font-size: var(--text-lg);
  line-height: var(--leading-lg);
  letter-spacing: var(--tracking-lg);
  font-weight: 600;
}

.text-xl {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  letter-spacing: var(--tracking-xl);
  font-weight: 600;
}

.text-2xl {
  font-size: var(--text-2xl);
  line-height: var(--leading-2xl);
  letter-spacing: var(--tracking-2xl);
  font-weight: 700;
}

.text-3xl {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  letter-spacing: var(--tracking-3xl);
  font-weight: 700;
}

.text-4xl {
  font-size: var(--text-4xl);
  line-height: var(--leading-4xl);
  letter-spacing: var(--tracking-4xl);
  font-weight: 700;
}

.text-5xl {
  font-size: var(--text-5xl);
  line-height: var(--leading-5xl);
  letter-spacing: var(--tracking-5xl);
  font-weight: 700;
}