Welcome to WebmasterWorld Guest from 188.8.131.52
Forum Moderators: incrediBILL
verdana at 13px, 14px, 15px
arial at 15px, 16px, 17px
I previously used pt and did some testing from the PC and Mac. Wow, what an eye opener that was. Also did quite a few print tests from the PC and Mac. Switched everything over to px and have virtually eliminated cross browser font issues. Printed documents are also much more legible using the px unit!
(edited by: pageoneresults at 9:15 am (utc) on Feb. 3, 2002)
I tested pages using pt in css against pages using px and the px pages outperformed the pt pages in all areas, mainly readability at the browser level and of course print legibility.
I never use px but always -2, -1, +1,+2 relatives. If I fix the size in px, it stays that way even if the users "increases" the fonts, which of course will tick them off...
The fixed size only applies to IE users. Netscape allows the sizing up or down (ctrl++ or ctrl-- in NS6+)
P.S. I think anything less than 12px will encounter readability and printability issues. 13px in NS4 does not render at the same size it does in IE4+ or NS6, its smaller. That is why I think the smallest you can go is 13px!
verdana is nice but sizes differently from other fonts
font size...pt is for print...I'm going to fix sizes in points when I do print style sheets...otherwise it's a ludicrous unit to use on a web site since it is designed to specify sizes on paper
px I ONLY use to line text up with images...and I do that very rarely and never make a layout that depends on it...I try to stick to em and % just about all of the time
in style sheet:
<h1 class=1>This will appear as verdana at 11px in black. </h1>
I avoid defining a class, unless there is going to be more than one kind of H1 tag. I don't trust all the spiders and algos to pick up an H1 with a class attribute as a true H1 tag.
Just paranoid I guess. I also avoid using <br> tags inside the H tag text.
You really need to compare your website to some of the "big boys" like CNN.com. If your font is smaller than there, it's too small for some non-windows/non-mac users. If you go playing with exotic fonts, then said users may have a difficult time getting information from your site.
I run the resolution up on my systems, usually at the 1280x1024 range for a 21" monitor (not unreasonable, in my opinion). I don't run the font down in my browser, the default is almost always good enough for me. This way I have ample desktop to work with images and in multiple xterms.
For a case-in-point, when I read forums here on webmasterworld.com, they are *barely* readable to me. grnidone (my wife) can't read them from my unix desktop. She's asked me to take a screen dump and send it to Brett, but I've not considered it to be that big of an issue.
I know that unix desktops make up less than 5% of your traffic, but they're probably 30% (or higher) of the clue that notices technical issues on your site. Please keep that in mind when frobbing the fonts.
You may argue "then it's a user issue, my site is not a problem", which is fine if you don't want me or other unix folks to visit your site. :)
Rob++ (senior Solaris geek, at large)
I am interested in the rationale behind your choice of pixels as the measurement for your font sizes.
Good morning abbeyvet! This is one area that I am still researching. Over a year ago I switched to pt instead of relative so I could have a little more control over layout and bypassing any user preferences. Since then, I switched to px for tighter control in both viewing and printing.
Since I have the luxury of working on both Mac and PC I'm able to test a variety of methods to see which produces the best results. Here is what I've gathered so far...
1. Using pt for sizing does cause problems between the PC and Mac. 8pt looks fine on the PC and microscopic on the Mac and its all relative to monitor resolution. Since most people on the Mac are at higher resolutions than those of us on PC's, sizing using pt is an absolute no-no, I learned the hard way.
2. Using px for sizing seemed to produce the best results for fixed sizing between both platforms. I experimented with 8, 9, 10, 11, 12, 13, 14, 15 and 16px sizing and narrowed it down to 12, 13, 14 and 15 when using verdana. Up 1 or 2 pixels if using arial.
3. Using pt for sizing also causes problems when printing. 8pt sizing produces acceptable readable documents from the test pages on the PC. 8pt sizing was almost microscopic when printing from the Mac.
4. Using px for sizing solved the printing problem. I printed documents from the test pages from the PC and Mac, they were almost identical and very readable. In fact, the sizing looked just as it did on the monitor.
5. I also noticed that type looks a little cleaner when using px as opposed to pt. I'm not sure why, but there is a slight noticeable difference. Plus you can use odd numbers for sizing which I found did not work real well with pt. Sometimes you could not even see the difference between 8pt and 9pt. But, you can definitely see the difference between 12px and 13px.
I haven't tested other measurements yet. I eventually want to give back the ability to the user to adjust their font sizing. Right now, because of design issues, I cannot have them blowing the design out of whack by adjusting up in the sizing.
The topic of font sizes is always a great discussion. There are many units of measure to use and I see valid points for most of them. Px seems to be the preferred unit of measure amongst the design community. The average size seems to be 11-12px when using verdana. Some even use smaller when it comes to very tight site structure where you've got to squeeze a lot of information into a small area, usually navigation blocks. I pretty much stick to 13, 14 and 15px for verdana and 14, 15 and 16px for arial.
Yes I know, some of what I say about accessbility, and what I actually have done are slightly different. 100% accessibility is the goal and font sizing is my last issue. Over the next month or so, I will be testing all units of measure to see what produces what. My main concerns are first; readability and then printability. I manage quite a few sites where the user prints information pages and I want to make sure that what they see on screen is also what they get when they print and px seems to be the best at producing consistent results across the browsers and platforms that I tested on.
P.S. Don't have access to other operating systems but feedback so far from those who do has been positive.