2

How can I have my fonts scale based on screen size?

(So, rather than just having a few media queries to adjust to maybe 3 or 4 screen sizes, have the font be proportional to the screen size so we make maximum use of the screen.

I need to support all browsers back to ie6. It's OK if the support is not "pretty" on browsers with < 1% market share but it should at least be usable.

I've considered:

  • vm (% of viewport size) : not well supported.
  • FitText.js
  • Using Ems (this seems to at least adapt somewhat. (If I view it on my phone and change from landscape to portrait the font gets a bit smaller. I"m guessing maybe the phone/browser is resizing the base font in that case.
  • using a lot of Media queries (10 or 20) and perhaps using EM for all sizes so we only have to set the base (body) font size in the media query.
  • Why would there be 20 different media queries if your using 3-4 screen sizes... You use mobile, tablet, desktop, and larger. That's 4... and you use rem to get the root size which in turn will change all the rest. – Simon Hayter Dec 9 '14 at 21:57
  • There are 10 different commonly used (>5% each) sizes on desktops alone. Not to mention all the different phone makers, tablet makers and sizes (there about 10 sizes on this page alone: ciop.com/common-resolutions-for-mobile-phones-and-tablets – Clay Nichols Jan 10 '15 at 13:23
  • You shouldn't need to have more than 4 different styles for devices, a font size should work on all mobiles. The pages a 640px device should look no different than a device than 600px this is because you use em or rem which will scale based on the device that is being viewed, along with media queries, this method is used by most professional run websites. – Simon Hayter Jan 10 '15 at 15:33
2

In my CSS I use percentages for font size changes and make sure that font-size is set to inherit on all element types

h1 {
    font-size: 200%
}
h2 {
    font-size: 150%
}
table {
    font-size: inherit;
}

Then JavaScript just needs to adjust the base font size of the document or body.

$("body").css("font-size",Math.max($(window).width()/50,8)+"px")

That particular statement relies on jQuery, but it should be doable without jQuery as well.

Here is a page where I use the technique to get a chart to take up the entire screen with appropriate sized fonts.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.