Change Fontsize differently per Breakpoint

Webdesign Help
1

Hi there

How can I change the fontsizes (also for the headings) differently per breakpoint? I have not found a suitable place in the file “_variables.scss”.

Thanks for your support.

Cheers, Reto

2

You can add two rules to your CSS file for each heading <h1> through <h6> (and for <p> if you like,) which will vary the font size from XS to XXL by using the calc function. A single media query will set the max size of the font. Here’s an example…

h1, .h1 {
  font-size: calc(24px + 1vw);
}

@media screen and (min-width:1600px) {
  h1, .h1 {
    font-size: 40px;
  }
}

What this will do is make it so your H1 font size will never be less than 24 pixels, and never be more than 40px. The actual size will increase or decrease variably, depending on the width of device viewport.

So in this example, on a screen that is 300 pixels wide, the <H1> font would be 27 pixels in size (24 + 3 = 27) and it would grow smoothly up to 40 pixels and then stop once the viewport screen reached 1600 (24 + 16 = 40)

Of course you can change the base font size, the media query breakpoint and the value of the amount added to the font size (for example, 1.2vw) as suits your needs.

3

Thank you for your response. The answer was very helpul.