Responsive font-size/weight

Question

I can make my images/divs responsive by using percentages.

How can I make the font-size responsive to different screen sizes?

Answer 1

Depending on the array of browsers you have to support, CSS3 Viewport-percentage lengths might be a good solution:

http://css-tricks.com/viewport-sized-typography/

http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

I decided against this approach since it is only supported on iOS6 and not Android, and my project is a tablet & smartphone mobile site.

Answer 2

You can use CSS3 vh, vw,vmin and vmax new values for responsive font.

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

Answer 3

I stumbled across this problem recently and I wrote a solution for it that suits my needs. Maybe you will find that you can incorporate it into your CSS as well.

github.com/wadim/responsive-font-size

Usage:

@import "responsive-font-size";

p {
    @include responsive-font-size (
        $min-font-size: 1.8em,
        $max-font-size: 3.7em,
        $min-screen-width: 640px,
        $max-screen-width: 1200px,
        $font-size-step: 0.3em /* optional parameter, default: 0.1em */
    );
} 

It basically says:

• for screen width smaller than 640px I want the font-size to be 1.8em
• for screen width greater than 1200px I want it to be 3.7em
• scale the font appropriately in between
• don't bother changing the font size by less than 0.3em

Answer 4

If you want it to change when you hit width milestones (e.g. 768px, 370px, etc.), then use a CSS3 media query. If you want it to be constantly changing, then you could use the same percentage, or em, technique as with the images/divs (i.e. target / context = result), but I would suggest media queries.