Website Font Face/Size You Like The Best?

[olimits7]

Hi,

I currently have "Verdana" set on my site with font size mainly varying from 2 or 3...However, I'm thinking of changing the font face to "Arial".

What font face and sizes do you currently use on your website?

Thank you,

olimits7

[KenB]

I use Verdana with a default font size of 13px.

Verdana has an advantage over Arial in that "1" "I" and "l" all look distinctly different from each other.

[olimits7]

Yes, that's a good point...the less confusing it is for customers the better! haha...

[rocknbil]

... size mainly varying from 2 or 3...However, I'm thinking of changing the font face to "Arial".

The combination of these two make me think you are still using <font>?

I use them all (web-safe's only), based on context, and don't have a preference, but do decide one over another depending on context. Verdana has a lower x-height, meaning it takes up more horizontal space than Arial, and tends to "feel" a little more like a display face. So if I want to separate it from a site largely set in Arial/Helvetica, I'll set that in verdana. Don't overlook Tahoma, which is a nice sans-serif font, but use descendant alternate fonts: tahoma, arial, serif.

For large blocks of text, again, context, but especially in large blocks design plays absolutely no part in it (IMO) - it's all about legibility. Sometimes I revert to Times or a variation due to the reasoning that serifs are intended to make text easier to read. (Don't know that I agree, but dat's wut dey tot uz n typography . . . )

For sizing, I found em (the em unit, not "found 'em") too slippery and unpredictable. I usually don't set a global size on body, but do set sizes in percentages on specific elements and element types - general text, 90%, nothing ever smaller than 75% (and then, only if I know no one will ever read it, such as a copyright line, etc.) The only time I resort to pixel sizing is in a constrained space where it has to work nicely with graphics - and even then it's not wise. But I do a lot less wise things.

A small addition to "usually don't set a global size on body" - if you set 90% on body, then 90% on some element within the body, the actual size is 90% of 90%. While you can gauge that visually, it often gives surprising results. I hate surprises, unless they involve exotic cuisine or expensive spirits.

I try to use as little sizing as possible, overall,allowing the natural document flow and the end user determine what is appropriate. I DO check designs when resized/zoomed. Using percentages seems to let that happen well without breaking the layout.

[lorax]

I assume you are referring to live text instead of text embedded within a graphic.

For me everything is design/goal driven.

Some sites need nothing but simple straight forward sans-serifs like Arial, Tahoma, or Verdana. I don't punch up the font size without some bolding because the descenders are so slight. For designs that need a bit more elegance I'll use a serif family (Georgia, Helvetica, Times New Roman) but it depends upon how much copy will be used and how wide & tall the space it will be applied within.

I will often add letter spacing to titles, bylines, headers and other attention grabbing type. I'll increase the letting to help add some white space and give the blocks of text a bit less weight. Solid blocks of text scream at me and I won't bother to read them. My goal is to soften the copy and invite the reader to read or at least skim. Then I use pleasant contrasting highlights to draw their eye into what I want them to focus on. A tasteful link color is very useful here.

[piatkow]

For font I specify the family but nothing more.

[jsinger]

What's your target age group?

I've read that virtually everyone over age 40 can benefit from reading glasses. Most site designers, I'm sure, are under that age. And most people with real money these days are over 40, often over 70.

Please, none of that trendy gray text.

I understand that upsizing text is a hot trend in ecommece.

[rbarker]

We just launched a site for the 40+ crowd and jumped the font size up. These are not the small purple text on a black background people.

I'm part of this older group and really enjoy reading my site. I know it's my site but it's nice not to squint and lean forward for a change.

Not sure if it's just me but I'm seeing Google's results page font jumping up and down lately. Right now it's small.

[johnyfav]

I've often heard designers say that typography is the web.

I also believe that if you hold up a book to the screen and sit the usually distance to said screen and book you get a fair idea of what sort of size text you should have.

I go with 16px/1em. I set all my sizes in em so that they are scalable if the user requires via the browser.

It's not just the font size but correct line height and also how you apply margin and padding to elements so that vertcial rhythm is achieved making reading easier.

I also think there is an optimal reading width - To short or too long for the paragraph to fit in to and the text isn't as easy to read.

[topr8]

>> I set all my sizes in em so that they are scalable if the user requires via the browser.

i get your point but many people have absolutely no clue as to how to do this, i'd say the average user is stuck on default settings and they never change them, they just leave sites where the text is too small for them to read comfortably.

[johnyfav]

To be honest using 16px as a base (most browsers default 100%/1em to this don't they?) I'm not that bothered about the text being too small. I know I used to use 13px sometimes but 16px as standard is fine I think.

BTW most of post above is not my findings but based on posts from blogger/designer Wilson Miner/ iA.

[juliocrd]

in our sites we use some standards about fonts. All the text is in Verdana 13px, h1 25px diff color, h2 18px same color as h1, h3 14px same color as text but bold. It works great, our average time on site is between 3.0 to 4.5mins per visitor ;)

[KenB]

One reason I use a fixed PX instead of a dynamic size like EM is that I have a pixel perfect design. If text scaled independently from the rest of the page there would quickly be a lot of layout issues. By all sizes being defined in PX the whole page scales together and most of the modern browsers properly zoom in on the whole page rather than just the text, which keeps text flow proper.

[jsinger]

I 'spy' on a lot of websites for inspiration but had never looked at the AARP site before. More white space than usual. Same thing with Depends.com LOL!

[pageoneresults]

If I'm not mistaken, I don't think it matters these days if you use px vs em vs % vs etc. The browsers today provide a scaling function (zoom) to enlarge what the user sees in their viewport. It can be easily accessed using the Ctrl +/- keys. Yes, many users may not be aware of that but, for the users who are, we use it quite frequently on those 11px, 12px and 13px fixed font size designs. And, if you are using anything less than 11px for copy that needs to be easily read, you're asking for trouble. I hit my back button on sites that use microtype.

Personally? I've been moving to the percentage methods. One of my goals for 2010 is to go fluid on all designs moving forward. In those fluid environments I may use a blend of relative and fixed font sizing to produce the desired results. I have 3 systems here, with 2 different resolution settings. I have my viewports set to specific sizes based on what is normally available after taking into consideration scrollbars, toolbars, etc. Many of my older designs that used fixed font sizing look way small on these new larger displays which are a 21.0 set to 1366x768, both 24.0s set to 1920x1200. The higher resolutions have changed my way of thinking when it comes to using anything fixed these days.

All I can say is that I'm happy for Ctrl +/- and Ctrl+0 which puts it back to 100%.

Note: I've been using CSS min-width and max-width quite a bit these days to counter the extremely high resolutions folks are browsing at. Most websites are not designed to spread the entire width of this 24.0 display at a 1920x1200 resolution. OT, I did see a really nice 5 column implementation that I'm seriously considering using myself. :)

[lorax]

>> Same thing with Depends.com LOL!

Oh there are some bad jokes running through my head thanks to you! ;)

[Eurydice]

There is no perfect font or perfect size.

There are different target audiences. Some prefer 10, others like 9. Some like serif, others want to see sans-serif.

How to find out? You test. Use A/B Splits or multivariate testing. You'll quickly find the perfect combination for your audience.

[jsinger]

"Use A/B Splits or multivariate testing."

That may be okay if one get 10,000 visitors a day. Isn't it a lot easier and a heck of a lot faster to copy from a savvy high traffic site that aims for the same market you do? Amazon seems pretty successful.

[hutcheson]

Everything, EVERYTHING is % and em. No pixels, no points, NEVER, NO WAY.

A designer sits there with 20-something-year-old eyes, on a 27-inch monitor megacentipixel screen--and not thinking about the surfer, viewing the same content with original-issue-eyes on an iPad.

That content better flow, vertically, with as few as 30-40 characters per line. And the user can, if necessary, work out how to view it.

[reprint]

I have a website for opticans and use ever decreasing font size down the page. Seriously though, don't forget your mobile users in choosing your font or serve them a different layout and font

[pageoneresults]

A designer sits there with 20-something-year-old eyes, on a 27-inch monitor megacentipixel screen--and not thinking about the surfer, viewing the same content with original-issue-eyes on an iPad.

I'm off to get my eyeglass prescription updated. Viewing websites for the last 15 years has really taken its toll on these original-issue-eyes. Had perfect 20/20 up until a few years ago. If you are sitting behind a computer for most of your adult life, you WILL need eyewear or some other corrective action. Websites are hell on the eyes.

[Trav]

I'd say the 1em's have it right. If you're really concerned, provide an obvious in-page style-sheet switcher that bumps up the font-size. Wired has a good example of this.

I'd say there's a distinct difference between marketing copy, and article copy. For good examples, contrast Amazon's styles with the New York Times website's styles.

Amazon:

body {
background-color:#FFFFFF;
color:#000000;
font-family:verdana,arial,helvetica,sans-serif;
font-size:small;
margin-top:0;
}

NYT:

body {
background-color:#FFFFFF;
color:#333333;
font-family:georgia,"times new roman",times,serif;
font-size:62.5%;
line-height:1.5em;
margin:0;
padding:13px 0;
}

Which of those would you say is more readable? I think they both work well for their intended purposes, but if I'm going to be reading for a bit, I want serifs.

[jsinger]

One might expect the NYT to use Times New Roman font, although I understand it was developed by the Times of London.

[JAB Creations]

It's time web designers stop using font-size: -5px;.

- John

[albo]

My doc sez 20-15 in the left eye and 20-25 in the right. So...

My old codger clients prefer (believe it or don't) Lucida Grande to Verdana for plain text: Verdana's so fat it makes a blur for lines longer than, say, 25-30em. They prefer, too, some "font play". Palatino/Georgia or Times for headers, and, yes, Verdana for small footer/about-the-site.

I use % sizing because an em of Verdana is different from an em of Palatino and it gets too tricky, mixing back and forth.

[chrisranjana]

Verdana with a combination of reasonable small size. seems to be popular .

[JS_Harris]

My browser ignores web commands on font type/size.

[KenB]

One might expect the NYT to use Times New Roman font, although I understand it was developed by the Times of London.

The way it was explained to me is that serif fonts (e.g. Times) are better for viewing/reading in printed form (e.g. newspaper). Sans-serif fonts (e.g. Verdana) are easier to read on a video screen (e.g. displayed webpage).

[Digmen1]

Please, none of that trendy gray text.

x2

[Xapti]

I get your point but many people have absolutely no clue as to how to do this, i'd say the average user is stuck on default settings and they never change them, they just leave sites where the text is too small for them to read comfortably.

I totally hear this all the time as a main counter-argument to using relative font sizing. The problem is that If the user is using a high resolution screen or low resolution screen, the font size will look wrong anyway. You MUST rely on the user having a proper font size set for things to go well for everyone because everyone does NOT have the same monitor size, everyone does NOT have the same DPI settings, and everyone does NOT run at the same resolution. They also might not have your font, resulting in a very different font size (Google "why not to use Verdana", not that I completely agree with it)

Another issue with fixed font sizes is that when that's done, people seem to just put absolutely everything else in fixed size too. So when any Joe walks in with his Firefox's minimum font size set to something different than the websites, the entire website breaks and looks stupid, just because they didn't use relative element sizing.

I've been a perfectly eye-healthy age 20s person, and I need to both set my default font size higher, as well as add a minimum font size. Why? because I'm running at 2048x1536. Many people are running at high res nowadays, as well as low res on palmPCs, tabletpc, smartphone, etc. and if someone doesn't rely on the user's preferences, they are being ignorant and alienating users in favor your their style preferences in my opinion.

>> I set all my sizes in em so that they are scalable if the user requires via the browser.

I get your point but many people have absolutely no clue as to how to do this, I'd say the average user is stuck on default settings and they never change them, they just leave sites where the text is too small for them to read comfortably.

This is pretty backwards thinking. As far as I've heard, the default font size on browsers is usually fairly large sized for smaller resolutions, and quite good (not small) for high resolutions. Most people that change their font sizes go font-sie:90%, font-size: 80%, font-size: 13px, etc.. All of that stuff is shrinking the font, not increasing it. You're right that making the font size small might make people leave, but everyone is sizing their fonts too small. the only way to ensure it's not too small is to use relative sizing.

One reason I use a fixed PX instead of a dynamic size like EM is that I have a pixel perfect design. If text scaled independently from the rest of the page there would quickly be a lot of layout issues. By all sizes being defined in PX the whole page scales together and most of the modern browsers properly zoom in on the whole page rather than just the text, which keeps text flow proper.

I'm not sure if you're aware, but that hasn't been a proper reason for quite a long time. The only reason would be that you don't have the competence, or the willingness/ambition, to do a proper job and have the elements all scale. It can be done now, and if it can't it's almost certainly the browsers fault which can be fixed with javascript.

As I've already mentioned, using fixed pixel size does not ensure your site gets displayed in that font, or that it says layed out properly. Many people have plug-ins and preferences built into their browsers which WILL do their own things to the website/font, and in your case, the website WILL break anyway.