<_font> settings

Verdana and always Verdana, very neat and easy to read on screen. We go for 11px, too small for some but the sites are not built to appeal to everybody.

verdana, 12px if I have my way :)

It depends on the site. For most, I use the combination Arial, Helvetica, sans-serif, at times with and at times without the Verdana. But some sites I've done which are country, folksy or historical in nature, I used Times New Roman, Times, serif.

Verdana.

Trebuchet MS, Tahoma, Verdana, Arial...always 12 px.

Verdana, 11px... naturally! ;)

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...

"verdana", arial, helvetica, sans-serif
"arial", verdana, helvetica, sans-serif

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)

pageoneresults, unfortunatelly I have no access to Macs. What specific problems did you have? My site is 99.9% text so this is an issue for me.

When using pt the size of the text in print was almost microscopic (especially 8pt). When using px, it is more true to size and prints very legibly. Its all relative to what size you are using on pt. I was at 8 and 10pt, it was just too small and I have many users across of a variety of sites who need to print information material. I never realized how bad it was until I did some in depth testing.

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,arial,helectiva,sans
10 - 18px

11-12px for base font.

10px verdana is very readable on Windows at 1280x1024. I figure if I can read it at that res then 800x600 shouldn't have any problems :-)

arial,verdana,helectiva,sans
and
courier,arial,helectiva,sans

For variety :-)

font face...usually arial, helvetica, sans-serif at work...I've taken to using garamond for large tracts of text and frugal sans now and again when I'm not too bothered if people actualy get the font

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

I don't think I made it clear - I do not use pt or px at all.

I use font="-1" etc. in the HTML and small, x-small, large, etc. within the CSS.

Does that still make relative font size "ludicrous unit"?

Nice thread!

>I never use px but always -2, -1, +1,+2 relatives

I use 2 for normal stuff - 1 for micro, and 3 for large.

I always have minfont size set in opera to 10px...

Like Brett said,
no px but 1,2,3, -1, -2, -3
font?
Verdana of course

wolfy

Important on-going conversations, and there doesn't seem to be a consensus. Here are some related threads:

• Safe Fonts in CSS [webmasterworld.com]
  
• Font Sizes [webmasterworld.com]
  
• Cross-browser Font Sizes [webmasterworld.com]
  

12 or pref 13 px, verdana, arial etc, or -1 in html. A little extra line spacing is nice. I like the theory of relative fonts, but not always the application. I don't see anyone listing ems or percentages, any advocates?

verdana in style sheets - one each for IE and Netscape by way of browser sniff. For page optimising you can still use your <h>tags assigning a class in the style sheet without having that ugly large font size on your page.

in style sheet:

.1{font-family:verdana;font-size:11px;color:#000000}

on page:

<h1 class=1>This will appear as verdana at 11px in black. </h1>

Why not just use H1{font-family:verdana;font-size:11px;color:#000000}

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.

Verdana, Arial, Helvetica, sans-serif here. Set to variying px's.

Brian

Right on Tapolyai.

For the love of god, please don't specify font sizes absolutely (in px). You're killing us out here that use high-res monitors. Microsoft bears a lot of the blame for not making fixed sizes resizable, but why make it work when there are other techniques?

If I try to use a different font it just stays at the standart font, I would like to use american font but it dossent seem to work.

taskmaster

As a Netscape/Solaris user, I need to add some commentary here..

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)

Hmmm, I just posted a response in an FP forum related to this same issue...

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.

I used to use px for all of my sizing. However we were getting an astronomical amount of complaints from users who had modified the settings on thier browsers, that the size was either too big or too small (i said thats like changing the color settings on your tv and then being mad at NBC for everything being to red, but thats my opinion), So we changed back to pt. Now we get no complaints but the sizes are fixed.

Can someone post an example of what their css looks like with relative sizing units. I'd like to see what the attributes look like.

verdana 10px for menus, 10pt (size 2) for body text

I prefer: Verdana, Arial, Helvetica, sans-serif;

at a size of: 10px;

with a line height at: 160%