code without coding

flexible typography

Delete px fonts

/* ❌ Breaking inheritance */
.article {
  font-size: 16px;
}
.article h2 {
  font-size: 24px; /* Fixed ratio */
}
.article p {
  font-size: 16px;
}

/* ✅ Flowing with inheritance */
.article {
  font-size: 1rem;
}
.article h2 {
  font-size: 1.5em; /* Relative to parent */
}
.article p {
  font-size: 1em;
}

❌ Fixed px (ignores parent)

Article Title

This content uses px. When we change the parent font size, nothing happens. Each element is locked to its pixel value.

✅ Flexible em/rem (flows with parent)

Article Title

This content uses em. When we change the parent font size, everything scales proportionally. The whole system flows together.

Inheritance + rem sizing is enough.