Thoughts on font size options

Forum Moderators: phranque

Message Too Old, No Replies

Thoughts on font size options

csdude55

1:54 am on Jul 7, 2018 (gmt 0)

I have a section where the default font size on desktop is 12px, and on mobile is 16px. I'm letting the user change the font size, and since I don't know the original font size I'm using percentages.

This is what I've done so far:

'Small'=> '80%',
'Medium (default)'=> '100%',
'Large'=> '120%',
'Extra Large'=> '140%',
'Huge'=> '160%'

So if they select "Small" then it's changed to <font size="80%">Example</font>, and if they select "Huge" then it's changed to <font size="160%">Example</font>.

What do you guys think, are these good choices or should I make it more like:

'Small'=> '80%',
'Medium (default)'=> '100%',
'Large'=> '140%',
'Extra Large'=> '180%',
'Huge'=> '220%'

I thought about putting all of them in (80, 100, 120, 140, 160, 180, 200, 220), but I'm afraid that's just too many choices... plus, I have no idea what names to use (what comes between "Extra Large" and "Huge"?).

What would you guys do?

keyplyr

1:58 am on Jul 7, 2018 (gmt 0)

What would you guys do?

We wait for you to figure it out... then we do what you do :)

csdude55

3:02 am on Jul 7, 2018 (gmt 0)

Hahahahaha :-P

lucy24

3:31 am on Jul 7, 2018 (gmt 0)

Frankly I'm surprised nobody has yet stepped in to say that you�re supposed to pick a font size that fits your personal vision of the site, design everything to fit that size and only that size, and if users have a problem with it, well, tough patootie on them.

Don't mind me. I've just come from a forum where someone neglected the <fe> markup around a post, with the predictable disastrous consequences.

keyplyr

4:13 am on Jul 7, 2018 (gmt 0)

if users have a problem with it, well, tough patootie on them

Well that's keeping with the Google mandate of doing what's best for the user.

csdude55

4:23 am on Jul 7, 2018 (gmt 0)

Frankly I'm surprised nobody has yet stepped in to say that you�re supposed to pick a font size that fits your personal vision of the site, design everything to fit that size and only that size, and if users have a problem with it, well, tough patootie on them.

I know, I was kinda waiting for that one, too :-P

In this case, though, I'm working with a contenteditable section where the user can make titles, headlines, etc. These days I have to compete with Facebook... they restrict you to one font, so one thing I can do to compete is let you play with the design to stand out.

tangor

4:49 am on Jul 7, 2018 (gmt 0)

Know what the default font is for all browsers. Use ems, not percents (better fit in most cases), and go from there.

16px/1em most cases, but not always.

Just know that folks like me, with vision problems, will kill all your happy stuff to HIGH CONTRAST and FIXED FONT SIZE OF MY CHOICE and that number is only growing larger, not smaller (for those who have spendable income that isn't tied to a parent, ie, Old Pharts).

Then again, since I am Old Phart, I code old school, so what do I know? Ha!

iamlost

5:33 am on Jul 7, 2018 (gmt 0)

The simple solution is to leave it as you have it and watch to see how many people max it out at 'Huge => 160%'. If it's a significant number then adjust. No two sites have quite the same audiences so what works for me may not do as well for you, etc. The older your audience skews or the more you make it easier for the visually impaired the larger the preferred font, typically, although relatively few are likely to need content text larger than 25.6px/160%.

Also don't forget that many users with vision difficulties will have changed default font size in their browser preferences or via it's zoom command as desired so that you will never know your default is overridden.

The biggest problem I found with font size is the multiplicity of devices, their viewport size and resolution differences. Because of this I've switched to using CSS3's viewport units: vw, vh, vmin, vmax. They are broadly supported by all modern browsers with a few minor idiosyncrasies and, naturally, increasing problems as one goes back down IE versions. This means, if you like to play nice with everyone, including a fallback, i.e. including a 'px' size as well as a 'vw' one for font-size.

* w3.org/TR/css3-values/#viewport-relative-lengths
Note: WebmasterWorld cuts off anchors so copy and paste above to go direct.

* Viewport Sized Typography [css-tricks.com]

Never a simple one size fits all answer in webdev! :)