Text size as a %. Is it possible?

HTML & CSS
1

Can I set text size based on a % of the parent div ?

So I could set to 5% and if div was 300x300 the font size would be 15px.

This is mainly for when the div itself is a % of the browser window (so changes as you resize the window).

I have a layout which on a mobile phone obviously has a narrow div, and on a desktop it is very wide. I would like small px text on the mobile and larger on the desktop (% of div size).

I don’t want to use different stylesheets etc. I want the text to resize as the window does.

2

You actually don’t want tiny text on the mobile version. Ever try to read 4px fonts on a mobile?

But anyway I think the % of some child’s font should be dependent on the parent’s font size, not the box size.

I could be wrong, and I seem to remember that % should act like “em”.

You actually want the font size to remain mostly the same even if the div shrinks (within reason) otherwise if it really really shrinks you’ll get 4px unreadable fonts. The goal in mobile is to prevent users needing to zoom in further (or zoom at all).

Anyway, best way to know for sure is to Try It To See. You can make your desktop browser width smaller as a crude mobile test.

3

Thanks for the reply.

I don’t want small on mobile, I want large on desktop. Say 12px mobile and 20px desktop or whatever works - I’ll give it a test and see.

Does anybody have a basic, simple example of where I can see a box with text in which resizes the text as the browser is adjusted?

4

Cross-posted here, with an answer of sorts.

cheers,

gary

5

I think the only way to achieve this effect (although I can’t for the life of me think why you would want to) would be with SVG, which I think can be made to scale to the available size. I suppose on that basis you could actually do it with a PNG, but you’d get crap results at most scales, whereas SVG should keep it looking cleaner.

6
  1. It shouldnt make that much of a difference for mobile. Even if you set a div size in %, it doesn’t trully translate to px. In other words the size of a font is not relative to the available area.
  2. That being said. If you set the div’s font size all text will be based on that measure. so lets say you had a div and you wanted the fontsize to be 15px WHEN the width equals 300px. The math for this is simple… 1/%wanted =ems.
    div {font-size:15px; width:20em}

if the user scales the fonts the div will scale along side with it. this brings us back to #1. I dont think mobile media scales just the font. So you best bet might be to make an alternate stylesheet for mobile devices based on screen width.