css1Add my vote for this tag create new tag
, view all tags

How to define fonts in CSS

For the most "compatible way", here is what I found, from such sources as:

If you support only modern browsers (IE6, mozilla 1+, opera 6+), just use the OKbrowsers.css file below. If you want to support older browsers, the trick is to use a css like:

   @import url(OKbrowsers.css); _in it, html-prefixed (to overridecompact code below) in percents_
   _here compat code for old browsers, in pixels_

Thus old browsers will ignore the @import line, new ones will ignore the second line.

As for fonts, I recommend verdana for the text body (more legible), and arial for the buttons (more compact, and very familliar to windows users eyes)

The values I chose: (if using a class=text on the main text body)

@import url(OKbrowsers.css);

body {font-size: 16px;font-family:arial,geneva,helvetica,sans-serif;}
code, kbd, tt, samp, pre {font: 14px /* 16*.9 */ monospace}
big, large {font-size: 18px}
small, sup, sub {font-size: 14px}
h1 {font: 32px sans-serif}
h2 {font: 28px sans-serif}
h3 {font: 24px sans-serif}
h4 {font: 21px sans-serif}
h5 {font: 18px sans-serif}
h6 {font: 16px sans-serif}

.text {font-size: 16px;font-family:verdana,arial,geneva,helvetica,sans-serif;}

With the OKbrowsers.css file contents being:

body, td, th, div, span, p, ol, ul, dl, dt, dd, li, blockquote, h1, h2, h3,
h4, h5, h6, select, input {
  font-family: arial,geneva,helvetica,sans-serif ! important
html body {font-size: 80%;}
html body p {line-height: 1.2}
html code, html kbd, html tt, html samp, html pre {font: 100% monospace}
html big, html large {font-size: 115%}
html small, html sub, html sup {font-size: 85%}
html h1 {font: bold 175% sans-serif; margin-bottom: 0.5em;color: #334d55;}
html h2 {font: bold 144% sans-serif; margin-bottom: 0.2em;color: #334d55;}
html h3 {font: bold 120% sans-serif; margin-bottom: 0.1em;color: #334d55;}
html h4 {font: bold 100% sans-serif; margin-bottom: 0em;color: #334d55;}
html h5 {font: bold 90% sans-serif; margin-bottom: 0em;color: #334d55;}
html h6 {font: bold 80% sans-serif; margin-bottom: 0em;color: #334d55;}

html .text {font-family: verdana,arial,geneva,helvetica,sans-serif;}

-- ColasNahaboo - 23 Apr 2004

I agree on the font family; Verdana and Arial are easy to read on screen.

From accessability perspective it is better not to force a hardcoded font size on the user, and to use 100% for the main part of a page. In fact not specifying the font size is probably the best for the main text. That way users experience the same font size across sites.

I personally dislike sites that force me to read text in 80%, or worse, in a hardcoded pixel size too small to read. On IE I can switch off the font size, but unfortunately it does so as well for text that is designed to be smaller, like sidebar links and copyright notices. Ergo the need to not touch the size of the main part of a page and to use relative font size for page decoration. That way users can set their preferred font size between smallest and largest.

And yes, I am aware that it is challenging to define a layout where content flows nicely across different user defined font sizes.

At work we created a skin which has CSS with relative font sizes. It works well across all major browsers like IE, Mozilla, NS. With some ugly hacks we got it to support also NS 4.7 (which still has a surprizingly large share since our Engineering is Unix centric).

-- PeterThoeny - 24 Apr 2004

I agree that an ideal world, not specifying the font size should be the logical choice. However most sites on the internet specify the font size (to smaller values), so if you do not do it, naive users get suprised as your site do not look like the other sites. Our IE users complained to have to switch browser font default when going on and off the intranet, when we did not specified the font.

The problem also is that browsers have very different defaults font sizes, especially the headers, (often way too big), so your users often use only H3 or H4 in wiki pages, ruining the semantics, so you need to decrease the font size of H1 to have it just big enough to feel natural for the skin. It is quite important when you want cooperation on the same page by peopl with different browsers to try to get an uniform look and feel across browsers, but in a clean CSS way, so that users are still able to override it if they want.

-- ColasNahaboo - 29 Apr 2004

Edit | Attach | Watch | Print version | History: r4 < r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r4 - 2008-09-17 - TWikiJanitor
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.