DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Site Building & Maintenance

Reply
 
Thread Tools Display Modes
Old 02-24-2006, 09:33 AM   #1
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Font Sizes in <font> or CSS

Once again I am trying to convert old HTML code with <font> tags to CSS.

I am trying to get the code using CSS to look like the code using <font> tags in the browsers, especially IE6 and FF1.51. My current problem is with font sizes. I tried to compare font sizes 5 and 6 with equivalents in CSS using px values. The code below shows my test. The images below show that the result in MSIE6 (shown first) is different from Firefox 1.51 (shown second).

Identical code in Dreamweaver MX is shown by the two browsers.

Hmmmm.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Font sizes</title>

<style>
.caption {
font-size: 32px; font-family: Arial black;
color: black;
font-weight: normal;
}

.captable {
font-size: 24px; font-family: Georgia;
color: black;
font-weight: normal;
}

</style>

</head>
<body>


<p> <font color="#0000ff" face="Georgia" size="5">
Font Georgia, 5T</font>
<span class="captable">TCSS Georgia 32px</span>
</p>
<p>
<font color="#0000ff" face="Arial Black" size="6">
Font Arial black, 6T</font>
<span class="caption">TCSS Arial black 24px</span>
</p>
</body>
</html>
Attached Thumbnails
Click image for larger version

Name:	qmsie01.jpg
Views:	150
Size:	24.1 KB
ID:	406   Click image for larger version

Name:	qfire01.jpg
Views:	142
Size:	18.0 KB
ID:	407  
dthomsen8 is offline   Reply With Quote
Old 02-24-2006, 10:07 AM   #2
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
My current problem is with font sizes. I tried to compare font sizes 5 and 6 with equivalents in CSS using px values.
Don't be doing that then !

Seriously, first of all you should not use font size in pixels since it kills scalability for IE users - bad for accessibility; use % and ems for on-screen fonts. Second, don't try to imitate primitive styling in HTML with CSS!

Try this for a better and more useful approach: first convert your HTML to purely structural and semantic HTML only and make sure you end up with a usable page. Then - and not before - create a stylesheet (adapting HTML only when absolutely necessary) to generate a similar look an feel (font faces, relatives sizes, colors), but don't bother with an exact look - it's such a waste to spend your time on solving the wrong problem!

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 02-24-2006, 05:29 PM   #3
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default More Font Size Tests

My earlier test of font sizes has led me to try the relative sizes with <font> and CSS, using both the MSIE6 and Firefox 1.51 browsers. I put the seven font size=1 through font size=7 to line up with the seven CSS absolute size values, running from xx-small to xx-large. In every case, and with both browsers, the CSS sizes are smaller than the font tag sizes. The screen capture for MSIE is below, followed by the Firefox screen capture.
Attached Thumbnails
Click image for larger version

Name:	qmsie02.jpg
Views:	112
Size:	29.3 KB
ID:	408   Click image for larger version

Name:	qfire02.jpg
Views:	120
Size:	35.4 KB
ID:	409  
dthomsen8 is offline   Reply With Quote
Old 02-25-2006, 12:15 AM   #4
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
I put the seven font size=1 through font size=7 to line up with the seven CSS absolute size values, running from xx-small to xx-large. In every case, and with both browsers, the CSS sizes are smaller than the font tag sizes.
Sure they are. There simply is no exact mapping for HTML font sizes in CSS. So don't even try - and anyway why would you? All that matters is that you end up with a page layout that your visitors find easy to read.

Using the xx-small to xx-large range is not advisable either - like I said, ems and percentages are the preferred units for sizing fonts.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog

Last edited by ktinkel; 02-25-2006 at 05:12 AM. Reason: fixed the quote
iamback is offline   Reply With Quote
Old 02-25-2006, 04:10 AM   #5
dthomsen8
Member
 
dthomsen8's Avatar
 
Join Date: Aug 2005
Location: Philadelphia, PA 19130
Posts: 2,158
Default Client calls the tune

Quote:
Originally Posted by iamback
[Using the xx-small to xx-large range is not advisable either - like I said, ems and percentages are the preferred units for sizing fonts.
The client calls the tune. He doesn't care what might be considered advisable.

In this case, the web site should look as close to the way it currently looks with <font> tags and all kinds of other problems, but with CSS and validation without even warnings. ... and " and the like converted to the appropriate & codes.

Meanwhile, I am learning a lot about CSS and browser differences.
dthomsen8 is offline   Reply With Quote
Old 02-25-2006, 09:10 AM   #6
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dthomsen8
The client calls the tune. He doesn't care what might be considered advisable.

In this case, the web site should look as close to the way it currently looks with <font> tags
Then just get as close as you can with proper CSS! On visitor is going to worry about a pixel-size difference in fonts as long as they are legible. Using ems and % is simply more reliable and constant across browsers; you'll avoid problems that way.

Maybe the client calls the tune - but you are the HTML expert, he should listen to you! Otherwise he can do it himself.

Quote:
Originally Posted by dthomsen8
... and " and the like converted to the appropriate & codes.
Normal double quotes in running text do not need to be converted to anything at all. Check values of attributes, though, make sure all attributes are enclosed in quotes and if you need to embed quotes within them use the "other" quotes for the attribute as a whole. You'd normally need only &quot; when that is not possible. Try it and validate (with the W3C validator - don't try Dreamweaver for this, it may well mislead you), and see what you get.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 02-25-2006, 10:25 AM   #7
Steve Rindsberg
Staff
 
Join Date: Nov 2004
Posts: 6,712
Default

>>Using the xx-small to xx-large range is not advisable either - like I said, ems and percentages are the preferred units for sizing fonts.

I'll bite. ;-)

Why are ems/percentages preferred?

   
__________________
Steve Rindsberg
====================
www.pptfaq.com
www.pptools.com
and stuff
Steve Rindsberg is offline   Reply With Quote
Old 02-25-2006, 10:36 AM   #8
ktinkel
Founding Sysop
 
ktinkel's Avatar
 
Join Date: Oct 2004
Location: In Connecticut, on the Housatonic River near its mouth at Long Island Sound.
Posts: 11,189
Default

Quote:
Originally Posted by Steve Rindsberg
I'll bite. ;-)

Why are ems/percentages preferred?
I’m not Marjolein, but will stick my neck out.
  • Using ems or percentages relates font sizes to the defaults on any reader’s browser.
  • Ems/percentages scale; pixels do not, in some browsers at least.
  • Using extra-small to extra-large you are ceding too much control to the various ways browsers interpret these values. Ems/percentages relate to font sizes chosen by the viewer.

   
__________________
[SIZE=2][COLOR=LemonChiffon]::[/COLOR][/SIZE]
[SIGPIC][/SIGPIC]
ktinkel is offline   Reply With Quote
Old 02-25-2006, 11:23 AM   #9
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by ktinkel
I’m not Marjolein, but will stick my neck out.
And I have nothing to add

Oh, wait - but I do (to my own statement really): using ems and % indeed relate to the font size in the browser as the user has chosen it; but for printing you can, of course, use points. I'd still not use any of the x-whatever series of sizes, nor pixels (which relate to the screen).

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 02-26-2006, 05:32 PM   #10
Steve Rindsberg
Staff
 
Join Date: Nov 2004
Posts: 6,712
Default

>>Using ems or percentages relates font sizes to the defaults on any reader’s browser.
Ems/percentages scale; pixels do not, in some browsers at least.
Using extra-small to extra-large you are ceding too much control to the various ways browsers interpret these values. Ems/percentages relate to font sizes chosen by the viewer.>>

I understand the problem with pixels. But I don't grasp the distinction between the amount of control given to the viewer's browser by percentages and by (for want of a better term near to hand) "named" sizes (small, x-large et al).

Or to put it differently, is it more a matter of the *degree* of control you want to exercise?

With percentages, you can request font size changes in very fine increments, and base them on a more concrete starting point. With named values, it's all pretty loose. Medium might be one size on browser A, quite another on browser B, and the increment between one size and the next is large (and ill-defined).

FWIW, the stylesheet I'm working with now uses ems/percents and I'm amazed at how consistently it renders across several browsers.

BTW, there's a wealth of interesting CSS-based templates at www.oswd.org. Mine's based on one from Adreas Viklund, who's posted quite a few there.

   
__________________
Steve Rindsberg
====================
www.pptfaq.com
www.pptools.com
and stuff
Steve Rindsberg is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Actual browser sizes (maybe) ktinkel Web Design 21 03-15-2007 12:57 PM
Font site, Flash movie, free font ktinkel Fonts & Typography 2 12-03-2006 12:17 PM
Larger Font/Smaller Font JavaScripts dthomsen8 Web Site Building & Maintenance 6 09-25-2006 03:51 AM
Font "activation" by font managers lindaniel Fonts & Typography 5 07-02-2005 11:39 AM
Font Management: Font Agent Pro michelen Fonts & Typography 13 03-25-2005 09:25 AM


All times are GMT -8. The time now is 03:33 PM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.