Responsive typography

nolasco7a — Thu, 25 May 2023 20:38:36 +0000

I have experience as a developer but I get surprise because every time you can discover new things, in my case I discover the power of font-size as size base for HTML document or web page

let me explain, everybody knows 1rem = 16px, but.... why.
this is thanks to font-size base in HTML that is 16px by default, then if you change your font-size to 20px, now 1rem = 20px, and then instead of changing all our typography classes or styles, we can simplify this task making the following to create a fully responsive typography:

Imagine that you have the following styles for you typography

p {margin-bottom: 1rem;}

h1, h2, h3, h4, h5 {
  margin: 3rem 0 1.38rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: 3.052rem;
}

h2 {font-size: 2.441rem;}

h3 {font-size: 1.953rem;}

h4 {font-size: 1.563rem;}

h5 {font-size: 1.25rem;}

small, .text_small {font-size: 0.8rem;}

Now to become our styles to a fully responsive typography we only have to add a media queries to change our font-size base
example:

/* Base style */
html {
  font-size: 16px;
}

/* Media queries */
@media (max-width: 768px) {
  html {
    font-size: 12px;
  }
}

And then we have a typography fully responsive for our website, where for small devices 1rem = 12px and for other device sizes 1rem = 16px.

I hope this blog helps someone.

DEV Community: nolasco7a

Responsive typography