scalable font

You can change your css to make the font smaller when the screen is smaller then 992px.

Example:

@media (max-width: 992px) {
   h1 {
     font-size: 12px;
    }
}

Thanks- I have that however I want to be able to scale up and down based on devices and not have to write a media query for each device or orientation.

Hi Nonamer,

Font sizes won’t scale proportionately to screen width on their own, so media queries must be used. That said, you can get great results with just a few media queries.

Here’s an outline of how you could scale the size of a post title with the size of the screen:

// phones
.post-title {
  font-size: 24px;
}
// tablets
@media all and (min-width: 600px) {
  .post-title {
    font-size: 36px;
  }
}
// laptops
@media all and (min-width: 900px) {
  .post-title {
    font-size: 48px;
  }
}
// widescreen monitors
@media all and (min-width: 1200px) {
  .post-title {
    font-size: 60px;
  }
}