Font size & family

[JorgeV]

Hello-

Within my process of cleaning my CSS, I came up to wonder which font size and family is the "best". I mean, which combination is the more comfortable, on desktop and on mobile?

So far, I've been using Verdana since a very long time, because this is the font "I" preferred, but overall, may be people prefer something else.

What is a good font size ? on desktop? and which one on mobile? I found out that, I can't really use the same font size, because there is now too many difference (size) between huge computer screens, and small mobile screen.

And is there a font which is better adapted, for the comfort of reading? Sometimes I hesitate between "my" Verdana,(fallback being Arial) and Times New Roman.

Are there any studies, about the readability / comfort / usage ?

I do make many tries, but I can't make my mind, also, I am so in use of seeing my sites with Verdana, than , when I use something else, it looks "odd" to me

[not2easy]

Screen resolutions are 'normalized' with your viewport settings, assuming you are using default
<meta name="viewport" content="width=device-width, initial-scale=1">
and not manipulating within the viewport meta tag. Manufacturers use a "Device Pixel Ratio" to normalize things like font size.

There have been discussions about the font options in the past that might be helpful: [webmasterworld.com...] and [webmasterworld.com...] - both from 2017 but still relevant.

You can avoid specifying pixel (or em) sizes and use relative sizes such as small, medium, large, x-small, x-large to leverage browser defaults.

[lucy24]

What is a good font size ?

None. There is absolutely no reason on earth to specify a point size, and plenty of reasons not to. For the assorted headers--and for the rare material that should be smaller-than-default, like sidebars--use percentages.

If you name a font, always specify a generic backup, like {font-family: Palatino, serif;}.

To this day there remains a widespread myth that sans-serif fonts are more readable on websites. Apparently nobody has noticed that computer screens no longer have a physical resolution of 72 or 96 dpi.

[topr8]

You can avoid specifying pixel (or em) sizes and use relative sizes such as small, medium, large, x-small, x-large to leverage browser defaults.

i use % for font sizes, which i've always assumed is similar. ... eg. 80% 120% 200% etc etc

seperately - i've observed that a huge number of websites use downloadable (non standard) fonts on their sites - which usually, it seems to me, to be of very little benefit ... eg. i don't think the choice of font is any better than the defaults available to most users on their device. it's a pet hate of mine! i always assumed it's another way of the font supplier to spy on us even more!

[lucy24]

I use % for font sizes, which i've always assumed is similar. ... eg. 80% 120% 200% etc etc

The difference is that percentages are relative to what’s around them. 75% within 16pt text is 12pt; 75% within a 36pt header is 27pt and so on. But you can be certain that it’s always going to be the proportion you specify.

The named sizes, from x-small to x-large, tend to be determined by the browser, and are often rounded off to some nice number: 9pt, 12pt, 16pt and so on. These are contant: “medium” means the size the user has set in their browser prefs, and then up and down from there, regardless of context. (I use “small” as part of one span definition that might occur inside any and all other text, so this particular span is always the same size.)

i don't think the choice of font is any better than the defaults available to most users on their device

Ditto, ditto, ditto. What is so special about ObscureFontName.ttf that outweighs the extra time required by a visit to Google Font Repository? (There is a place for named specialty fonts--I have to say this, because I use a very few myself--but they need to be genuinely specialized, and they need to be hosted on your own site.)

[not2easy]

I highly agree that if you wish to use specific font that need to be loaded, at least load them from your own site. It is the font equivalent of 'auto-play' otherwise.

[tangor]

As long as your <p> is readable, all the rest is just em or percent, or browser tag (large, x-large).

My concerns are having LINE LENGTHS, regardless of viewport, kept to 11 words or LESS per scan line. Lines that are too long are difficult to read.

Otherwise than above, I don't spend a lot of time fiddling with text/font sizes since a very large number of users on the web DEFEAT whatever you think is great with a standard they prefer ... and font choice they prefer, and a size they prefer. For some it is a form of self-defense as some webmasters get too clever for their own good and create sites that just aren't readable. And for those who do it for accessibility reasons, even your color choices, backgrounds, and other whizbang stuff is removed.

As for serif and sans serif, that's a matter of personal choice. Both are equally readable ... and study after study shows that to be the case.

[JorgeV]

Thank you.