Welcome to WebmasterWorld Guest from 184.108.40.206
Forum Moderators: incrediBILL
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).
Screen Caliper [iconico.com]
Okay, back to topic, sorry!
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.
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!
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.
The only reason to hard code fontsizes is to prevent the layout breaking, which is just bad design (flame proof underwear now donned)
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... ;)
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.
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)
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.
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 :-)
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! ;)
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 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.
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.
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.
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 :-)
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)
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.
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!
I won't give in! I won't give in! I won't give in!
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!