Welcome to WebmasterWorld Guest from 34.239.158.107

Forum Moderators: not2easy

Message Too Old, No Replies

Which Font(s) and Size are you using?

     
7:55 pm on Sep 6, 2017 (gmt 0)

Full Member

Top Contributors Of The Month

joined:Apr 20, 2017
posts:334
votes: 73


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.
8:06 pm on Sept 6, 2017 (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


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]

8:10 pm on Sept 6, 2017 (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:15766
votes: 831


:: 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.
8:12 pm on Sept 6, 2017 (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


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.
8:56 pm on Sept 6, 2017 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts:146
votes: 2


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-
8:59 pm on Sept 6, 2017 (gmt 0)

Junior Member from US 

5+ Year Member

joined:Feb 11, 2010
posts:146
votes: 2


and CMD+ or - for Mac
9:43 pm on Sept 6, 2017 (gmt 0)

Senior Member

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

joined:Sept 25, 2005
posts:2091
votes: 370


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.
9:58 pm on Sept 6, 2017 (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


I use web font families specific to mobile for better control, but usually browser fonts as default; keeps things faster.
10:12 pm on Sept 6, 2017 (gmt 0)

Full Member

Top Contributors Of The Month

joined:Apr 20, 2017
posts:334
votes: 73


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.
10:33 pm on Sept 6, 2017 (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


I also use extended line-height for almost everything, but especially on mobile.
11:38 pm on Sept 6, 2017 (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:15766
votes: 831


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.
10:06 am on Sept 7, 2017 (gmt 0)

Full Member

Top Contributors Of The Month

joined:Apr 20, 2017
posts:334
votes: 73


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.
10:12 am on Sept 7, 2017 (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


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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members