Which Font(s) and Size are you using?

[Peter_S]

Hi,

I was curious about which font and size are you using for the "main text" of your pages? I don't mean the navigation or design elements. Just for the main body text, of your article (for example).

I use Verdana at a size of 1.1em. But I am always hesitating between Arial and Verdana.

I can't make my mind about which font is the more comfortable for readers.

[keyplyr]

font:13px/17px verdana,arial,sans-serif;

and

font:11px/12px verdana,arial,sans-serif;

Works best for my desktop <=> mobile.



[fix typo]

[edited by: keyplyr at 8:11 pm (utc) on Sep 6, 2017]

[lucy24]

:: detour to generic stylesheet ::

font-size: medium; font-family: Palatino, serif;

I only ended up naming a default font because too many systems' serif default is some version of Times, which I loathe. Pages that specify a font for non-default content* can be counted on (literally) my fingers.

I use Verdana at a size of 1.1em.

Why do you set a larger-than normal default when Verdana--like most sans-serif fonts--already reads big?

:: insert boilerplate about relative readability of serif and sans-serif fonts for body text ::

Now, what really makes me foam at the mouth is sites that set an explicit font size in points or pixels.

Edit: Har, har. Looks like I was typing concurrently with the above post. But I wasn't kidding.


* Best example, horrifying and funny in equal measure: A book from 1841 that includes a long list of then-used astronomical symbols. By default, my computer displays them as multicolored emoji. I do not consider this desirable in context.

[keyplyr]

Now, what really makes me foam at the mouth is sites that set an explicit font size in points or pixels.

Futile emotion since you don't know the reasoning.

[typomaniac]

Think of your audience, if the pages in question are likely to have an older audience, use a larger font. Just in case they might not be familiar with Ctrl+ or Ctrl-

[typomaniac]

and CMD+ or - for Mac

[robzilla]

Now, what really makes me foam at the mouth is sites that set an explicit font size in points or pixels.

You must do a lot of it then :-) WebmasterWorld would be one such example (of many, I'm sure).

Font size is usually something close to 14px. Line height for paragraphs always 1.6em, makes a huge difference. As for the font family, I haven't used any default fonts like Arial and Verdana in a while, having replaced them with web fonts like Roboto, Open Sans and Ubuntu, which have a more modern feel to them, they're reasonable lightweight, and popular enough so that many people will have them cached.

[keyplyr]

I use web font families specific to mobile for better control, but usually browser fonts as default; keeps things faster.

[Peter_S]

Thank you all for your comments.

Why do you set a larger-than normal default when Verdana--like most sans-serif fonts--already reads big?

I find this to be more comfortable to read, for everybody. I think that an airy(?) text is a lot more pleasant to read. I add a line-height of 150%.

Also, nowadays, most of people are scanning a page, instead of really reading each single word or sentence, so I think, that like that, they can find the information they want, or locate the part which is interesting them the most quickly. But all this is a feeling and subjective.

[keyplyr]

I also use extended line-height for almost everything, but especially on mobile.

[lucy24]

I add a line-height of 150%.

My default for p and li elements is 1.2. I haven't set a global default because for some things like tables, an even 1em is likely to work better. If a sub- or superscript--or a stray word in a different font--makes the affected lines go further apart, your default line-height is probably too little.

Useful exercise: run up a demo HTML document using all the standard elements--paragraphs, lists, tables, headers and so on. Give them all different borders and background colors so you can tell them apart, but don't say anything about size, margins, padding, line-height, indentation and so on. Now open it in various browsers. Results these days will be fairly consistent across different browsers ... but they will also be fairly horrible. When you're overriding defaults, it can be a good idea to know what, exactly, you're overriding.

[Peter_S]

My default for p and li elements is 1.2. I haven't set a global default because for some things like tables, an even 1em is likely to work better. If a sub- or superscript--or a stray word in a different font--makes the affected lines go further apart, your default line-height is probably too little.

If this comment was targeting "me", this was not my default setting for the whole page. When I started the topic, I mentioned it was for the main text of a page. So this is only for the "body" of the "article" of the page.

Just in case they might not be familiar with Ctrl+ or Ctrl-

You can also hold the CTRL key, and use the mouse wheel, to increase or decrease the size.

[keyplyr]

On my keyboard I can hold down the Ctrl and use the Up & Down arrows to increase or decrease the size.

Can't remember if other keyboards to that. This is a new All-in-One Media Keyboard AES that connects through encrypted WiFi.