Welcome to WebmasterWorld Guest from 18.204.48.199

Forum Moderators: phranque

Message Too Old, No Replies

Thoughts on font size options

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

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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?
1:58 am on July 7, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


What would you guys do?
We wait for you to figure it out... then we do what you do :)
3:02 am on July 7, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


Hahahahaha :-P
3:31 am on July 7, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15941
votes: 889


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.
4:13 am on July 7, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


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.
4:23 am on July 7, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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.
4:49 am on July 7, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10599
votes: 1127


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!
5:33 am on July 7, 2018 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 25, 2003
posts:1352
votes: 444


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! :)