Responsive font size in CSS

Question

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

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

When I resize the browser to mobile size the large font doesn't adjust and causes the browser to include a horizontal scroll to accommodate for the large text.

I've noticed that on the Zurb Foundation 3 Typography example page, the headers adapt to the browser as it is compressed and expanded.

Am I missing something really obvious? How do I achieve this?

css rem doesn't dynamically resize based on the viewport window. If you need to do that, then you either need Javascript or one of the pure CSS3 answers below. It's really only something you need on large heading text. — Evan Donovan, Jul 24 '19 at 16:15
@ToolmakerSteve That is a very naive thing to say, especially with the issues of being responsive across all devices. rem is not really a great option at all, you just seem to ignore the answers because it's "complicated"? — Emobe, Feb 23 '20 at 13:25
@Emobe - I agree - my comment was overly simple. I'm not web programming currently, but if I was I might combine `css calc` with `rem` and `vw` - like [Buzz's answer](https://stackoverflow.com/a/52962807/199364), to avoid problems at extreme small/large sizes. Mostly I wanted people to realize that `rem` avoided problems with `em`, hence simplifying a responsive solution (less repetition via media queries). And making it unnecessary to rely on `SASS` for this purpose. — ToolmakerSteve, Feb 23 '20 at 23:34
@Emobe - [csuwldcat's answer](https://stackoverflow.com/a/32805276/199364) is a good starting point: getting the base font to be a reasonable size under all conditions may simplify other calculations. Fine-tuning that base (body) size with a couple of media queries might be all that is needed; then use `rem` to do the rest of the work on other elements. With an occasional `calc` as mentioned above. Bottom line is to avoid repetitive media queries that are prone to mistakes when making changes. — ToolmakerSteve, Feb 23 '20 at 23:40
Font Size seems to become responsive if you set the base font size per width. boom — Jovylle, Apr 05 '22 at 10:28

score 693 · Answer 1 · edited Sep 28 '19 at 19:15

693

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

edited Sep 28 '19 at 19:15

Peter Mortensen

30,738
21
105
131

answered May 06 '13 at 01:01

Desolator

22,411
20
73
96

2

I am currently only coding to webkit - I am in love with this measurement thank you – Jeff Voss Jul 12 '13 at 20:05
Just awesome. Great. What are the odds of not working in different browsers – Murtaza Khursheed Hussain Sep 25 '13 at 08:20
21

@MurtazaHussain See: "[Can I use Viewport units: vw, vh, vmin, vmax?](http://caniuse.com/viewport-units)" – insertusernamehere Dec 06 '13 at 10:21
I Like this idea, tested it on a range of different devices and browsers, seems to work well on most – Alex Dec 01 '14 at 15:30
42

Great, I can use vw to scale text so it doesn't look puny on a desktop! Perfect... Oh. Huh, now the text is too small to read when viewed on a phone. Okay, well I can just use "max(x,y)" to make sure it doesn't get shrunk beyond a minimum size. Perfect... Oh. Hmm. Looks like "max" isn't supported properly by Chrome. Okay, well guess I'll just use "px" again. – original_username Jan 28 '15 at 23:38
1

@RobinVanPersi, may I ask you to have a look at a responsive design related question here : http://tinyurl.com/nadfh2u ? – Istiaque Ahmed Apr 12 '15 at 15:04
@Charlesism, this should be just another tool in your toolbox, as it makes the transitions really nice. All you need to do is put these units in a media query. At this point, you probably need to have a fallback anyway, so you can just switch the these viewport sized units off and on for a nicer flow for browsers which support it (which actually are quite a few). – bassplayer7 Aug 03 '15 at 14:18
Works with IE9. All lower IE versions must die. – vinsa Aug 14 '15 at 00:08
14

This seems not practical to me as the size becomes too small in mobiles and too large in higher resolution desktops. – Mr_Green Sep 07 '15 at 11:21
9

@Mr_Green: That's why you use media queries. On smaller viewports, make the font larger, on larger viewports, make it smaller. – Alistair Feb 11 '16 at 04:02
1

@Alistair: So...we're back to square one? :P – damd Aug 29 '16 at 07:59
Not square one as such, as with these you only really need one breakpoint. Use them for the smallest screens up to a max-width, then use a fixed size for larger screens. Rather than having multiple fixed sizes for multiple breakpoints. – AntonChanning Nov 23 '16 at 10:55
yes, I read every comments too. Vh vw are not well supported itself when combining with other css tech such as calc and flex. When they are used together or nested within each other, it creates bugs. Also if your screen rotate or change view size, lets say a keybord pad shows up, everything get mess up. – user2734550 Dec 27 '16 at 18:45
because it's still a buggy implementation and needs more time to be stable. – Desolator Dec 27 '16 at 18:49
1

Right. I hope this can be useful in the future because responsive font size is such a pain to deal with. – user2734550 Dec 27 '16 at 18:51
a nice little trick with view port based font size, is this one: https://css-tricks.com/fun-viewport-units/ – Adam Baranyai Nov 23 '19 at 14:20

score 340 · Accepted Answer · edited Jun 20 '20 at 09:12

The font-size won't respond like this when resizing the browser window. Instead they respond to the browser zoom/type size settings, such as if you press Ctrl and + together on the keyboard while in the browser.

Media Queries

You would have to look at using media queries to reduce the font-size at certain intervals where it starts breaking your design and creating scrollbars.

For example, try adding this inside your CSS at the bottom, changing the 320 pixels width for wherever your design starts breaking:

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

   body { 
      font-size: 2em; 
   }

}

Viewport percentage lengths

You can also use viewport percentage lengths such as vw, vh, vmin and vmax. The official W3C document for this states:

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Again, from the same W3C document each individual unit can be defined as below:

vw unit - Equal to 1% of the width of the initial containing block.

vh unit - Equal to 1% of the height of the initial containing block.

vmin unit - Equal to the smaller of vw or vh.

vmax unit - Equal to the larger of vw or vh.

And they are used in exactly the same way as any other CSS value:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Compatibility is relatively good as can be seen here. However, some versions of Internet Explorer and Edge don’t support vmax. Also, iOS 6 and 7 have an issue with the vh unit, which was fixed in iOS 8.

@Cuzox You should submit that as an answer, other solutions bring the test way to small to be able to use those methods for anything useful. When you combine a static height like that it makes it useful — ricks, Mar 27 '19 at 16:02

ashuvssut · Answer 3 · 2022-12-22T14:53:14.987

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 (lower bound).
80vh is the max font size (upper bound).

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).

@media queries can be used but you have to use minimum 3 media-queries to make the font size responsive

This solution is brilliant. I'd never heard of "clamp" before now. Thank you! — Laura Sage, Jun 09 '22 at 18:28
This solution needs to be the accepted answer in 2022. Modern CSS for the win. — Joshua Dance, Aug 10 '22 at 19:21

score 73 · Answer 4 · edited Sep 28 '19 at 19:35

73

I've been playing around with ways to overcome this issue, and believe I have found a solution:

If you can write your application for Internet Explorer 9 (and later) and all other modern browsers that support CSS calc(), rem units, and vmin units. You can use this to achieve scalable text without media queries:

body {
  font-size: calc(0.75em + 1vmin);
}

Here it is in action: http://codepen.io/csuwldcat/pen/qOqVNO

edited Sep 28 '19 at 19:35

Peter Mortensen

30,738
21
105
131

answered Sep 27 '15 at 06:40

csuwldcat

8,021
2
37
32

2

I should note that the difference here is that using calc to combine the two units is an easy way to help mute the variance in vw text scale at extremes. – csuwldcat Sep 27 '15 at 06:44
the viewport units are great for any project that doesn't need compatibility with old browsers. This calc trick does exactly what you say, scaling the text smoothly (opposed to strict limits set by media queries) but at a lesser (or higher!) ratio than the change in screen size – Ward D.S. Jun 22 '16 at 13:15
How it should be used ? I mean, if I want to change the size of my font, should I change only the em unit, only the vmin unit or the both ? – snoob dogg May 05 '20 at 18:50
I came here to write this extremely simple solution but then saw your answer and give +1. We can apply this solution to every element. For example image width: calc( 50px + 10vw) – y.selimdogan May 21 '20 at 23:42
Using vmin is interesting, but it means that the text size can change if the window width changes OR the window height! Try making the codepen window shorter (on desktop) to see what I mean. – changokun Feb 28 '22 at 00:52

score 36 · Answer 5 · answered Mar 26 '13 at 23:26

36

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;
   }

}

answered Mar 26 '13 at 23:26

Albert Xing

5,620
3
21
40

score 29 · Answer 6 · answered Mar 27 '13 at 20:22

29

If you don't mind to use a jQuery solution you can try TextFill plugin

jQuery TextFill resizes text to fit into a container and makes font size as big as possible.

https://github.com/jquery-textfill/jquery-textfill

answered Mar 27 '13 at 20:22

Javi Stolz

4,720
1
30
27

score 18 · Answer 7 · edited Sep 28 '19 at 19:22

There are several ways to achieve this.

Use a media query, but it requires font sizes for several breakpoints:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

Use dimensions in % or em. Just change the base font size, and everything will change. Unlike the previous one, you could just change the body font and not h1 every time or let the base font size be the default of the device and the rest all in em:

“Ems” (em): The “em” is a scalable unit. An em is equal to the current font-size, for instance, if the font-size of the document is 12 pt, 1 em is equal to 12 pt. Ems are scalable in nature, so 2 em would equal 24 pt, .5 em would equal 6 pt, etc..
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12 pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

See kyleschaeffer.com/....

CSS 3 supports new dimensions that are relative to the view port. But this doesn't work on Android:

3.2vw = 3.2% of width of viewport
3.2vh = 3.2% of height of viewport
3.2vmin = Smaller of 3.2vw or 3.2vh
3.2vmax = Bigger of 3.2vw or 3.2vh
```
body
{
    font-size: 3.2vw;
}
```

See CSS-Tricks ... and also look at Can I Use...

score 16 · Answer 8 · edited Sep 28 '19 at 19:18

There's another approach to responsive font sizes - using rem units.

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

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Later in media queries, you can adjust all fonts sizes by changing the base font size:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

To make this work in Internet Explorer 7 and Internet Explorer 8 you will have to add a fallback with px units:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

If you're developing with Less, you can create a mixin that will do the math for you.

Rem units support - http://caniuse.com/#feat=rem

score 13 · Answer 9 · edited Sep 28 '19 at 19:48

13

The "vw" solution has a problem when going to very small screens. You can set the base size and go up from there with calc():

font-size: calc(16px + 0.4vw);

edited Sep 28 '19 at 19:48

Peter Mortensen

30,738
21
105
131

answered Oct 05 '17 at 13:26

Tautvydas Bagdžius

301
3
6

I used `font-size: calc(1.2rem + 1vw)` for a heading. That way I had the advantage of using a non-pixel based unit (though that may not be applicable here). I also had a fallback in plain ems for older browsers Finally, since that got a little small on mobile, I used a media query for those. That may be too elaborate, but it seems to do what I wanted. – Evan Donovan Jul 24 '19 at 16:05

score 11 · Answer 10 · edited Sep 28 '19 at 20:00

I saw a great article from CSS-Tricks. It works just fine:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

For example:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

We can apply the same equation to the line-height property to make it change with the browser as well.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Is there a way to make font-size to not be greater than the defined [maximum-size] ? — Igor Janković, Oct 08 '19 at 15:15

score 10 · Answer 11 · edited Sep 28 '19 at 19:26

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.

score 7 · Answer 12 · edited Sep 28 '19 at 19:36

A responsive font size can also be done with this JavaScript code called FlowType:

FlowType - Responsive web typography at its finest: font-size based on element width.

Or this JavaScript code called FitText:

FitText - Makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.

score 7 · Answer 13 · edited Sep 28 '19 at 19:47

7

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);
}

edited Sep 28 '19 at 19:47

Peter Mortensen

30,738
21
105
131

answered Nov 26 '16 at 13:43

Dannie Vinther

183
1
5

Do you have a reference to that *Rucksack* you speak of? – Peter Mortensen Sep 28 '19 at 19:47
@PeterMortensen for some reason [this css tricks article](https://css-tricks.com/beyond-media-queries-using-newer-html-css-features-for-responsive-designs/) says that we can now use `min()`, and, even though MDN and caniuse claim `min()` is supported across the board, for some reason its not working? – oldboy Oct 23 '20 at 23:47

score 6 · Answer 14 · edited Sep 28 '19 at 19:57

I had just come up with an idea with which you only have to define the font size once per element, but it is still influenced by media queries.

First, I set the variable "--text-scale-unit" to "1vh" or "1vw", depending on the viewport using the media queries.

Then I use the variable using calc() and my multiplicator number for font-size:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

In my example I only used the orientation of the viewport, but the principle should be possible with any media queries.

Why don't you simply use `vmin` and `vmax` instead of this `@media` business? — Gark Garcia, Jun 21 '19 at 15:33

score 4 · Answer 15 · edited Sep 28 '19 at 19:49

4

I use these CSS classes, and they make my text fluid on any screen size:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

edited Sep 28 '19 at 19:49

Peter Mortensen

30,738
21
105
131

answered Oct 24 '18 at 07:04

Buzz

95
5

the `h3` one seems to be working well. Thanks! – LeOn - Han Li Jun 11 '22 at 18:46

score 4 · Answer 16 · edited Jun 22 '20 at 01:08

4

Try including this on your style sheet:

html {
  font-size: min(max(16px, 4vw), 22px);
}

More info at https://css-tricks.com/simplified-fluid-typography/

edited Jun 22 '20 at 01:08

Abdelsalam Shahlol

1,621
1
20
31

answered May 13 '20 at 05:20

Rohit Martires

313
2
8

is this supported these days? it doesnt work for me even though MDN and caniuse say its supported across the board? – oldboy Oct 23 '20 at 23:51
This is a great option, because Safari 13.0.5 has no support for clamp and this version is not old enough in jan/2023 (was released in 2020 ~2 years). With min/max the compatibility extends to Safari 11.1, which was released in 2018 ~ 4 years. With this simple solution we extend a lot the compatibility with responsive font-sizes, margins, positions etc. for mac users. – Diego Somar Jan 20 '23 at 15:13

score 3 · Answer 17 · edited Sep 28 '19 at 19:15

3

jQuery's "FitText" is probably the best responsive header solution. Check it out at GitHub: https://github.com/davatron5000/FitText.js

edited Sep 28 '19 at 19:15

Peter Mortensen

30,738
21
105
131

answered Nov 24 '13 at 07:32

Raghav Kukreti

57
1

2

This doesn't seem to be a direct answer to the question on why the font doesn't adjust. In any case, link only answers are not encouraged in SO. Please consider adding more details/sample code. – Harry Nov 24 '13 at 07:53

score 3 · Answer 18 · edited Sep 28 '19 at 19:42

In actual original Sass (not scss) you could use the below mixins to automatically set the paragraph's and all headings' font-size.

I like it because it is much more compact. And quicker to type. Other than that, it provides the same functionality. Anyway, if you still want to stick to the new syntax - scss, then feel free to convert my Sass content to scss here: [CONVERT SASS TO SCSS HERE]

Below I give you four Sass mixins. You will have to tweak their settings to your needs.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

After you finish playing with settings just make a call on one mixin - which is: +config-and-run-font-generator(). See code below and comments for more information.

I guess you could do it automatically for a media query like it is done for header tags, but we all use different media queries, so it would not be appropriate for everyone. I use a mobile-first design approach, so this is how I would do that. Feel free to copy and use this code.

COPY AND PASTE THESE MIXINS TO YOUR FILE:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

CONFIGURE ALL MIXINS TO YOUR NEEDS - PLAY WITH IT! :) AND THEN CALL IT ON THE TOP OF YOUR ACTUAL SASS CODE WITH:

+config-and-run-font-generator()

This would generate this output. You can customize parameters to generate different sets of results. However, because we all use different media queries, some mixins you will have to edit manually (style and media).

GENERATED CSS:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

score 3 · Answer 19 · answered Dec 13 '17 at 02:09

There are the following ways by which you can achieve this:

Use rem for e.g. 2.3 rem
Use em for e.g. 2.3em
Use % for e.g. 2.3% Moreover, you can use : vh, vw, vmax and vmin.

These units will autoresize depending upon the width and height of the screen.

score 3 · Answer 20 · edited Sep 28 '19 at 19:54

The text size can be set with a vw unit, which means the "viewport width". That way the text size will follow the size of the browser window:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

For my personal project I used vw and @meida. It works perfectly.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

score 3 · Answer 21 · answered Apr 02 '20 at 17:23

We can use calc() from css

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

The mathematical formula is calc(minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen

score 3 · Answer 22 · 2021-08-14T00:43:36.197

A lot of answers but I did not see anyone mentioning the min or max functions combined with media queries

There is a max() function in CSS, so our example above becomes a one-liner:

font-size: max(30vw, 30px);

Or double it up with a min and max:

font-size: min(max(16px, 4vw), 22px);

Which is identical to:

font-size: clamp(16px, 4vw, 22px);

Then don't forget to wrap this in a media query and apply to your h1,h2,h3,h4,h5,h6 how you prefer.

    @media (max-width: 600px) {
      h1 {
           font-size: clamp(16px, 4vw, 22px);
         }
    }

thdoan · Answer 23 · 2014-03-06T04:07:28.827

As with many frameworks, once you "go off the grid" and override the framework's default CSS, things will start to break left and right. Frameworks are inherently rigid. If you were to use Zurb's default H1 style along with their default grid classes, then the web page should display properly on mobile (i.e., responsive).

However, it appears you want very large 6.2em headings, which means the text will have to shrink in order to fit inside a mobile display in portrait mode. Your best bet is to use a responsive text jQuery plugin such as FlowType and FitText. If you want something light-weight, then you can check out my Scalable Text jQuery plugin:

http://thdoan.github.io/scalable-text/

Sample usage:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

I think scaling textes/ resizing text for responsive usage should be left to the browser, epspecially for the media queries this what they are designed for. — user254197, Aug 22 '15 at 07:23

score 2 · Answer 24 · edited Sep 28 '19 at 19:31

2

You can make the font size responsive if defining it in vw (viewport width). However, not all browsers support it. The solution is to use JavaScript to change the base font size depending on the browser width and set all font sizes in %.

Here is an article describing how to make responsive fontsizes: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

edited Sep 28 '19 at 19:31

Peter Mortensen

30,738
21
105
131

answered Aug 18 '15 at 21:50

Dmitry Pochtennykh

21
1

The link seems to be broken: *"403 Forbidden. nginx/1.10.3"* – Peter Mortensen Sep 28 '19 at 19:31

score 2 · Answer 25 · edited Jul 31 '17 at 16:48

2

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

edited Jul 31 '17 at 16:48

Peter Featherstone

7,835
4
32
64

answered Apr 27 '16 at 20:54

King Rayhan

2,287
3
19
23

6

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Tony Babarino Apr 27 '16 at 21:15
An explanation would be in order. – Peter Mortensen Sep 28 '19 at 19:44

score 2 · Answer 26 · edited Sep 28 '19 at 19:50

2

I have found this solution, and it works very well for me:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

edited Sep 28 '19 at 19:50

Peter Mortensen

30,738
21
105
131

answered Dec 13 '18 at 15:57

Buzz

95
5

score 2 · Answer 27 · edited Sep 28 '19 at 19:53

One way to solve the problem of the text to look good on both desktop and mobile/tablet is in fixing the text size to physical units like physical centimeters or inches, which don't depend on the screen PPI (points per inch).

Based on this answer, below is the code I use at the end of the HTML document for a responsive font size:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

In the code above the items of a different class are assigned font sizes in physical units, as long as the browser/OS is configured correctly for the PPI of its screen.

A physical-unit font is always not too large and not too small, so long as the distance to the screen is usual (book-reading distance).

score 2 · Answer 28 · edited Sep 28 '19 at 19:58

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.

score 1 · Answer 29 · edited Sep 28 '19 at 19:45

1

After many conclusions I ended up with this combination:

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

    h2 {
        font-size: 4.3vw;
    }
}

edited Sep 28 '19 at 19:45

Peter Mortensen

30,738
21
105
131

answered Aug 08 '16 at 16:18

Harsh Gupta

37
2

Abdelrahman · Answer 30 · 2023-05-12T00:36:04.503

Try this size in your root in your html. It works almost for all devices from mobile phones till TVs and big screens. In case of some very extreme cases, you could use media queries.

:root{
    font-size: max(14px, 1.1vmax); 
}

vmax takes care of cases where device height is bigger than device width or vice versa, 14px instead of base 16px as for tiny devices, 14px gives more room than 16px which could overflow device width, and it's still readable and not too far from 16px.

For the rest of your page css, try using rem relative values to the root base font-size instead of using absolute units .e.g. px.

Anyway, you would get good resuls for base px between 12px up to 16px, and view-port based sizes between 1vmax up to 1.25vmax, you could also try using vmin or vh or vw depending on your preference.

score 0 · Answer 31 · answered May 10 '21 at 14:23

The font size changes depending on the screen size by using CSS You can see that this H1 tag is responsive. (correct me if I'm wrong)

@media only screen and (max-width: 1000px) {
     h1 {
         font-size:5em;
    }
}
 @media only screen and (max-width: 500px) {
     h1 {
         font-size: 3em;
    }
}
 @media only screen and (max-width: 300px) {
     h1 {
         font-size: 2em;
    }
}
 @media only screen and (max-width: 100px) {
     h1 {
         font-size: 1em;
    }
}

<h1>Resize the browser!</h1>

score 0 · Answer 32 · edited Mar 19 '23 at 12:52

0

Set your base font size and clamp it with the clamp function.

using clamp() for font sizes, as in these examples, allows you to set a font-size that grows with the size of the viewport, but doesn't go below a minimum font-size

Clamp Method MDN Docs

Here is an example.

h1 { font-size: clamp(1.5em, 4vw, 2.5em); }
h2 { font-size: clamp(1.2em, 4vw, 2.4em); }
p  { font-size: clamp(0.6em, 4vw, 1.2em); }

edited Mar 19 '23 at 12:52

Tomasz Kowalczyk

10,472
6
52
68

answered Nov 14 '21 at 23:55

Patrick Kelly

971
7
15

1

btw your link wasn't formatted correctly – Kiran Jan 12 '22 at 20:30

score -2 · Answer 33 · edited Jul 31 '17 at 16:47

-2

Here is something that worked for me. I only tested it on an iPhone.

Whether you have h1, h2, or p tags put this around your text:

<h1><font size="5">The Text you want to make responsive</font></h1>

This renders a 22pt text on a desktop and it is still readable on the iPhone.

<font size="5"></font>

edited Jul 31 '17 at 16:47

Peter Featherstone

7,835
4
32
64

answered Jan 29 '15 at 16:35

DMartin

25

17

This is 2015. Font tag is deprecated as of HTML5. – Dan H Apr 15 '15 at 09:27
I thought the font tag was obsolete https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font I don't think it's deprecated yet but it will be at some point. – TURTLE Sep 24 '15 at 23:11
2

@Jake: It was deprecated in HTML4 and with HTML5 it is obsolete. Removal follows deprecation, not the other way round. – santon Nov 07 '15 at 21:31

score -2 · Answer 34 · edited Sep 28 '19 at 19:29

I am afraid there isn't any easy solution with regards to font resizing. You can change the font size using a media query, but technically it will not resize smoothly. For an example, if you use:

@media only screen and (max-width: 320px){font-size: 3em;}

your font-size will be 3em both for a 300 pixels and 200 pixels width. But you need lower font-size for 200px width to make perfect responsive.

So, what is the real solution? There is only one way. You have to create a PNG image (with a transparent background) containing your text. After that you can easily make your image responsive (for example: width:35%; height:28px). By this way your text will be fully responsive with all devices.

Responsive font size in CSS

34 Answers34

Linked

Related