Responsive font size in CSS

Question

I\'ve created a site using the Zurb Foundation 3 grid. Each page has a large h1:

相关标签:

Answer 1

Use this equation:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

For anything larger or smaller than 1440 and 768, you can either give it a static value, or apply the same approach.

The drawback with vw solution is that you cannot set a scale ratio, say a 5vw at screen resolution 1440 may end up being 60px font-size, your idea font size, but when you shrink the window width down to 768, it may ended up being 12px, not the minimal you want.

With this approach, you can set your upper boundary and lower boundary, and the font will scale itself in between.

Answer 2

I can say my method has the best approach to solve your problem

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

here clamp has 3 arguments.

• first one is the minimum allowed font-size.

• third one is the maximum allowed font-size.

• second argument is font-size that you wish to always have. Its unit must be relative(vw, vh, ch) and not absolute(i.e not px, mm, pt). relative unit will make it change its size w.r.t the changing screen sizes.

Consider an example : consider there is a large fontawesome icon that you want to resize dynamically (responsive icon)

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

• Here 80vw is the preferred font-size.
• 15 rem is the minimum font size .
• 80vh is the max font size.

i.e.

• if in a particular mobile screen size if 80vw < 15rem then font-size is 15rem.

• if screen is too wide then if 80vw > 80vh then font-size is 80vh.

Those methods above suggested by people always have a bit uncertain result... like when we use vw only, the font size might sometimes be too big or too small (unbounded).

using media queries are too old school.

Answer 3

If you are using a build tool then try Rucksack.

Otherwise, you can use CSS variables (custom properties) to easily control the minimum and maximum font sizes like so (demo):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Answer 4

Use CSS media specifiers (that's what they [zurb] use) for responsive styling:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Answer 5

You can use the viewport value instead of ems, pxs, or pts:

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

From CSS-Tricks: Viewport Sized Typography

Answer 6

This is partly implemented in foundation 5.

In file _type.scss they have two sets of header variables:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

For medium up, they generate sizes based on the first set of variables:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

And for default-i.e small screens, they use a second set of variables to generates CSS:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

You can use these variables and override in your custom scss file to set font sizes for respective screen sizes.