Arial, Verdana, Helvetica, sans-serif for body copy and some headlines/sub-heads
Times, Times New Roman, New York, serif for some headlines/subheads
Serif fonts are just such a pain on screen, there's no way I would ever run them small enough to be body text.
Generally CSS px sizing, 11px - 13px for body copy, varies widely for headers.
Why? Consistency, readability, simplicity. I'm a font addict though, so you'll OFTEN see graphic text buttons and headers on my pages, because I just HAD to use that one font nobody else seems to own.
I try to stick with fonts that come with the IE full install or the Mac OS (making sure there are equivalents from BOTH in the font specs).
All this talk about pixels and I thought I'd share a link to a tool that is absolutely incredible. Its called a Screen Caliper and I want to thank Blue (another forum) for sharing the resource!
Screen Caliper [iconico.com]
Okay, back to topic, sorry!
I prefer: Verdana, Arial, Helvetica, sans-serif;
at a size of: 11-12px;
with a line height at: 150%
I see all these replies with 10px or 11px. I just jumped over to 800 x 600 from 1024 x 768 and now see why. I guess that is where percentages and relative sizing comes into play. 10px and 11px are just too small for me at 1024 x 768 and I have very good eyesight 20/20. I guess I need to convert that to pixels!
10px and 11px are just too small for me at 1024 x 768
Hehe... That's the resolution I'm running, but after browsing primarily on a Mac looking at <font> tag size settings for SO long, I've gotten used to tiny type. It's the sites I see where the type is SO microscopic you can't even make out the letters when you squint that drives me batty.
I've got an 800x600 NT box on my desk next to my 1024x768 Mac here in the office, so I get both ends of the font/screen size spectrum for my (often frustrating) site previewing pleasure.
Latest screen resolution stats from W3Schools as of January 2002.
1024x768 or more 39%
Other or Unknown 3%
Almost an equal balance between the top two. Expect that to change quickly over the next six months.
So, that means choosing an average based on px. That's why I chose to use 12, 13 and 14px sizing. Verdana bold at 10 or 11px can become unreadable at 1024x768 and above. Anything below 10px and you can say goodbye to a large part of your visiting audience!
I'm shocked at how little I've seen mention of em's and % in this thread. What gives?
As for font-family (as specified in the *style sheet*)
Verdana, Arial, Helvetica, sans-serif as the primary choice with Arial, Verdana, sans-serif for larger headers etc.
pts, px? what about people that need to adjust the text?
IMO, cross-browser reliability *doesn't* give, and that's the problem...
I haven't seen any browsers that absolutely WON'T let you chenge display sizing if you need to (generally under Preferences/Internet Options). Folks with special visual needs will most likely have their system font sizes scaled up, and will know how to adjust sizing/preferences in the browser if need be.
pretty much *all* browsers will let you use scaleable fonts, even if you have to use the deprecated <font> tag with '-2' etc sizing it's streets better than px or pt
The only reason to hard code fontsizes is to prevent the layout breaking, which is just bad design (flame proof underwear now donned)
They'll all LET you use them, and then they'll all display them at totally different sizes... Which means whether the layout actually breaks, or just stretches in less-than-attractive ways, you lose control over the appearance of the design. You can build the most fluid layout on earth and it will still look "off" at either extreme of the display spectrum (extremely small screen/extra large fonts or unusually large screen/teeny fonts).
Depending on your target audience, that may or may not be worth worrying about, but if the appareance of the site doesn't matter, don't bother hiring a designer to build it... ;)
I don't care for css font sizing. Been my experience, that rarely do people get css font sizes right. Most pages that use css sized font's always go too small - always.
What is happening is "familiarity syndrome". They write the content and stare at the page for a thousand loads. That translates into familiarity. They know what it says. When it comes time to tweak the css font sizes, they think its more than readable. They get sucked into going with smaller font sizes because they want those 20 extra pixels it will kick back at the bottom of the page. Smaller text also flows better.
Remember when you are doing font size via css, you are messing with the prime content that your users come to see. Give them a break and let them see it.
Solaris Guru, when I first put the site up, I tried going with stock font size "3" here. What happened? About 20 people complained it was to large and difficult to read. That was back when we were doing a hundred people a day. So I went font size "2", and yours in 1 of two complaints (and now we have 100 fold more visitors a day).
That said, there is a personal solution in the works. As strongly as I feel about font sizes and readability, giving users their own personal choice has been on the agenda since the beginning. That is about to happen.
In the mean time - CNN vs WebmasterWorld:
I don't specify fonts for body text.
I use Verdana for navigation links and short text blurbs (because it displays well at small sizes) but would never use it for articles or large copy blocks. It's just too ugly and hard to read in body text.
Ironically, when I posted that, I was at "work" (as it is this week), on an unadultered HP-UX box using a "factory" configuration of Netscape-4.77. I haven't had the opportunity to crank the resolution up, but I suspect it was running at something along the lines of 1152x900 or 1152x864.
There, also, the webmasterworld.com font was down in the "acceptable by me, probably not for others" range. I *enjoy* small fonts like this, oddly enough! :)
I don't know how to 'splain it, perhaps there's a correlation with commercial flavors of unix running Netscape and fonts looking skinny upon display.
Rob++ (senior Solaris geek, at large)
Most pages that use css sized font's always go too small - always.
Agree. Half the time I just skip sites with body text at 10 px, admittedly my 1792x1344 (21") is a minority resolution, but there are plenty of 19" monitors out there.
WWM looks great, as do 12 or 13px.
I test at different resolutions, browsers, very helpful.
|Half the time I just skip sites with body text at 10 px. |
That convinces me. I just needed to see one person bold enough to make that statement! I'll agree that 10px may be the breaking point for readability, I think even 11 px is testing the deep waters.
I'll stick with my 12, 13 and 14px for now. I too would like to see more input on em and %. Based on the length of this thread and the number of people who have replied, I'm guessing that those two units produce unsatisfactory results as mentioned by mivox.
Brett brought up a good point about familiarity. Since I have my resolution at 1024x768 (and have for over two years) I'm designing for readability at that level. What does that mean? A little large for those at 800x600, perfect for those at 1024x768 and maybe a little small for resolutions beyond that.
Remember when you are doing font size via css, you are messing with the prime content that your users come to see. Give them a break and let them see it.</quote brett>
er... what do you mean, your not messing with content at all, that's the point!
To the other posters that have said stuff about css font sizes being to small, um, that will certainly happen if you use px or pt, but those measurements are near useless.
You need to use em's or %
I generally find setting no base size, having body text at 90%, navigation and sidebars at 75% and copyrights etc at 50% work on *all browsers*.
If css is such a bad thing, why do the w3c no longer include <font> in the XHTML and HTML DTD's?
Seems like some of you need to get up to date, your sites are slowly becoming obsolete.
If you /understand/ css then it's a snap to start seperating style from content and by keeping all that extra code *out* of you HTML documents the SE's will love you even more, now there's incentive!
Come on guy's don't be dinasours :-)
I just finished a site using em's and % for text sizes and leading (and a complete CSS layout to boot)
If any1 finds the text unreadable on their chosen browser (using the default settings, or smaller text size) I will be *very* suprised.
ps. why does this forum cut off any backslashes in your homepage url within your profile??? my homepage is http://iinet.net.au/~efford and it truncates it to http://iinet.net.au, I am not my ISP! ;)
Pixel settings all the way - 10px for menu, table, 11px for main text.,with Verdana as the font
Pixels give the best control and thats why I use em, plus if the user has poor eyesight they can resize the text manually.
I simply don't understand the obsession with control over font size...NOBODY but the designer knows whether a site displays exactly the same under all circumstances...if you aim at a design that is best at particular settings you'll only end up with it looking awful for most people a few months down the line as new technology kicks in
so you end up chasing your tail...hours of extra work for no real long term effect
worst of all it is the talented designers that are wasting their time taht way because they are the ones who were taught by dead tree methods...those of us who have a good understanding of the technology tend not to be so good at the visual stuff...but when it comes to choosing how to go about design the graphic design graduates all seem to rate advice about how the web works from people who are only capable of designing efficiently for paper, and since their views differ from those of us more familiar with the web they dismiss our arguments out of hand
you can't do DTP on a web site...it is crazy to even try it...that's how it is...the fact that a lot of very talented designers do so soen't make it worth copying them...currently we have a situation where the people who should be taking web design forward are taking it backwards instead simply because they won't let go of a set of ideas that have no place on the web
why do I get het up about this...I'm diabetic...a fair amount of the time I struggle to read small text...some of the time I have no problem with it...I need to control what size text I'm reading...or I can go look at somebody else's sites...use % and em for all crucial text or I'm one of the people whose custom you lose
I don't know if this is the simplest solution, but it's what I've been using for a while now (without any complaints... though that doesn't mean that I'm getting compliments either).
I just set the BODY to 1em.
Other than sizes for headers or specific items (in ems), that's about all I do.
1 em... let the user decide how many points or pixels or what-not that is by their browser preferences.
The only problem I've run into doing that is inheritance issues if you're not very careful.
But all browsers show reasonable default sizes so 1em wont hurt and leaving the body alone won't either. It's only when you start getting rigid that you run into trouble and there is very little reason to do so IMO.
>>I simply don't understand the obsession with control over font size
Very simply I want the site to look good at all resolutions.
I design on a 21 inch monitor with 1280 x 1024. I test on all browsers and both Mac and PC. I've been designing sites for over three years now, I have a degree in Information Studies, never done graphic design or been taught DTP.
Using pixel based fonts is the best way to get a consistent look and feel for sites so that the end user gets the maximum benefit. If they want to change the text size they can or if I decide later on to change the fonts to em or whatever all it takes is a couple clicks because everything is controlled by a style sheet.
Not one person (apart from people on this forum) has ever complained about PX based fonts. Pixel based fonts help me to display and present information that best utilises screen space, menu bars and tabular data.
<quote>Very simply I want the site to look good at all resolutions.</quote>
Why can't you do that with adjustable font sizes? I can, it's easy.
<quote>I design on a 21 inch monitor with 1280 x 1024. I test on all browsers and both Mac and PC. I've been designing sites for over three years now, I have a degree in Information Studies, never done graphic design or been taught DTP.</quote>
Yet you still apear to to be trying to design a fixed and unmoveable style on a flexible and liquid medium.
Perhaps you found what works for you three years ago but have not moved on from there? Kind of like these people that used to like black sabbath in the late seventies and still wear a sleeveless denim jacket over a leather full biker jacket.
Move on man, the webs a liquid, ever changing medium, if you design with that in mind your sites will benefit.
Hope you've got profile here with your site on, I'm going to take my myopic eyes over and have a peek!
Ps. No offence intended with the biker thing, just thought it amusing as Sweden is full of these types :-)
>>Yet you still apear to to be trying to design a fixed and unmoveable style on a flexible and liquid medium.
Why? Whats the point? whats so good about flexible design? Ive yet to see a "liquid" site thats any good.
If i go to a flexy site the first thing I do is drag the window down to a size where the text flows at a nice width. So basically anything over 1000 pixels wide I downsize...I cant imagine anyone wanting to scan the entire width of the monitor to read text. Just think about reading a book thats 6 foot wide...its unusable.
So with that in mind I design sites that hopefully will at least look the same in most resolutions.
|Why can't you do that with adjustable font sizes? I can, it's easy. |
The one inherent problem I have with the statement above is user settings. I have now converted my css test page to ems for further testing. I'm using a range from .6em to .8em. I based that on my settings of 1024x768. I like the micro control of ems, i.e. I can specify .6em or I can specify .61, .62, .63, etc...
The main problem I have is user settings, or lack thereof. I don't know how many people I talk to each week who haven't a clue about how to adjust their font settings. The default for IE is medium. The user has two choices below and two choices above. If they go one below, its not readable. If they go one above, its too big. There is no happy medium for me there.
The other problem I just ran into is NS4+ which is not displaying the same size as IE, its larger. My .8em <h1> element is too bold on NS and just right on IE.
Too much inconsistency for me at the moment. I chose to use 12, 13 and 14px and have tested on a variety of platforms and monitor resolutions. I'm satisfied with the results of using px as opposed to em's or %.
As I progress further down the path of CSS Dependency I may bend and convert to em's or %. Right now, I'm going to stick with the norm, keep my px 1 or 2 above the average and let it ride. If, and when, users start to complain, then I will address this issue once again. My eyes are red, my head hurts and it took 10 minutes to delete my temporary internet files, mostly from WebmasterWorld!
The bottom line... Its all about choosing a Happy Medium. Most of us using fixed sizing with px just want to make sure that a majority of our users will see what we would like them to see. If my 13, 14 and 15px settings are difficult to read for some, then I've alienated a small part of my audience. But, with all the testing I've done, I see that number to be very small.
If I were using 9, 10 and 11px, then I might have a problem, a big one! I'm not knocking those who use it, but I too am one to skip a page that is not readable on my 1024x768 resolution.
(edited by: pageoneresults at 6:01 pm (utc) on Mar. 1, 2002)
>>Why? Whats the point? whats so good about flexible design? Ive yet to see a "liquid" site thats any good.
eh? are you kidding?
>>If i go to a flexy site the first thing I do is drag the window down to a size where the text flows at a nice width.
er... that's what the <br /> tag is for.
you mentioned a 6ft book, and I agree with the general point wich is why you should use text breaks and such but turn that argument around. Your site is a 600px table in the middle of the browser window right? What about people (about 54%) with 800x600 monitors?
If you'd bought a nice wide screen tv and your favourite stations where just a little window in the middle wouldn't you be kinda mad? I'd be bloody furious.
try experimenting with % far more reliable, I have a test page here... [explodingnet.com ]
The only em's on the sheet are for padding etc, check out the sheet I think you might find it useful in your experimentation..
Thanks nwilson. Just viewed that page in IE6+, NS4+ and NS6+ on the PC at 1024x768. Adjusted the fonts sizes up and down, thats a little better as far as size from one setting to the other. I still have a problem with the layout changing when the user sizes up or down.
When I first browsed to that page in IE6+, I had to adjust my font setting from medium to smaller to see it probably as you intended. At medium, the body text was too bold. At smaller, it was just right.
Back to my statement above; not many know how to adjust their font sizes to get the best viewing size for the web pages they visit. If I were to set the same size you have on your test pages, I'm going to have too many elements wrapping where they should not. I'm not using a fluid layout, I have fixed <div> widths. I've designed my footer so the text links are on one line. If I switch to em's or % and browse to the site at my default settings, that line wraps and looks ugly.
I guess I'm a control freak! I also like to follow proven methods. I'm not disagreeing that 100% accessibility requires that you use em's or %, I just can't give in to that one just yet!
A good example is Brett's community here. When I browse to this site and my default settings are at medium, too many things wrap, are too big, bold, etc... I have to change the size to smaller or smallest to see the board how I'm sure Brett had intended it to be seen. I also have to expand my browser window to its fullest so I can get the whole picture.
I won't give in! I won't give in! I won't give in!
>When I first browsed to that page in IE6+, I had to adjust my font setting from medium to smaller to see it probably as you intended. At medium, the body text was too bold. At smaller, it was just right.
Yep, It's an imprecise medium, that's what I've been dribbling on about. When I visit this site I have to scale the fonts up to 150% to be able to use it.
Sounds like your best of as you are for the time being but with the next site you build I bet you'll enjoy the challange accessability with style presents. Good luck!
|Yep, It's an imprecise medium, that's what I've been dribbling on about. When I visit this site I have to scale the fonts up to 150% to be able to use it. |
That's the key right there, it's an imprecise medium. And if you are designing for 100% accessibility, its something you'll have to accept and design around the imprecision. I'm going to keep testing as we don't officially launch the site in question until 06.01.2002. I've got plenty of time to experiment and see what my beta testers say.
Hey thanks for the rant! I've enjoyed this one immensely! </p> <-- our secret!
| This 66 message thread spans 3 pages: < < 66 ( 1  3 ) > > |