Font Size

T

Trevor L.

BlankI know that this topic has been raised before - in fact, I have joined in. I think the previous query was to do with specifying font sizes in points pixels cm, etc.

Now I am getting more into HTML, CSS etc, I find that there many different ways of specifying font size.

From w3schools.com

These are the HTML Font Attributes (including size)
Attribute Example Purpose
size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color


These are the CSS Font Sizes
Value Description NN IE
xx-small
x-small
small
medium
large
x-large
xx-large Sets the size of the font to different sizes, from xx-small to xx-large 4.0 3.0
smaller Sets the font-size to a smaller size than the parent element 4.0 4.0
larger Sets the font-size to a larger size than the parent element 4.0 4.0
length Sets the font-size to a fixed size 4.0 3.0
% Sets the font-size to a % of the parent element 4.0 3.0


It is also possible to set the font size in pixels in CSS, e.g. font-size: 10px. I can't find the reference for this - perhaps it is the length value. Certainly 10px works.

Perhaps there are other possibilities in Javascript, VBS etc.

Anyway my question is :
What is the correspondence between these specs?

e.g.
If I specify 10px in CSS what does this correspond to as a font size in HTML - is it 3, 4, 5 or what?
What are the units used in HTML? I am sure font size="3" doesn't mean 3px.
What is the default size? e.g. in both HTML and CSS, one can increase the size, but what does it start at?

I hope someone can throw some light on this.
--
Thanks,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
P

Paul M

BlankHi Trevor
The answer is here

http://webmonkey.wired.com/webmonkey/99/41/index3a_page3.html?tw=design

I use pixel for font sizes because it is interpreted more or less the same in all browsers
best wishes
Paul M
I know that this topic has been raised before - in fact, I have joined in. I think the previous query was to do with specifying font sizes in points pixels cm, etc.

Now I am getting more into HTML, CSS etc, I find that there many different ways of specifying font size.

From w3schools.com

These are the HTML Font Attributes (including size)
Attribute Example Purpose
size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color


These are the CSS Font Sizes
Value Description NN IE
xx-small
x-small
small
medium
large
x-large
xx-large Sets the size of the font to different sizes, from xx-small to xx-large 4.0 3.0
smaller Sets the font-size to a smaller size than the parent element 4.0 4.0
larger Sets the font-size to a larger size than the parent element 4.0 4.0
length Sets the font-size to a fixed size 4.0 3.0
% Sets the font-size to a % of the parent element 4.0 3.0


It is also possible to set the font size in pixels in CSS, e.g. font-size: 10px. I can't find the reference for this - perhaps it is the length value. Certainly 10px works.

Perhaps there are other possibilities in Javascript, VBS etc.

Anyway my question is :
What is the correspondence between these specs?

e.g.
If I specify 10px in CSS what does this correspond to as a font size in HTML - is it 3, 4, 5 or what?
What are the units used in HTML? I am sure font size="3" doesn't mean 3px.
What is the default size? e.g. in both HTML and CSS, one can increase the size, but what does it start at?

I hope someone can throw some light on this.
--
Thanks,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Trevor L.

Paul M,

Thank you so much.

Just what I was looking for. Interestingly, even from such a good site, there are no definitive answers. One has to compromise to get an answer that works across all (or most) browsers. That's the way of the Web, I guess.
--
Cheers,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Trevor L.

After reading Paul M's answer and looking at WebMonkey, I decide to validate
my CSS code with W3C Markup Validation Service, and the specification 16px
was rejected as illegal.

So while pixels may be the best way to get uniformity, it is not regarded as
legal by W3C.

Or am I missing something?
--
Cheers,
Trevor L.



I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
R

Ronx

16px is legal, but it depends how you use it.
What is the full line of CSS, exactly as you have it on the page?
 
T

Trevor L.

Ron,

Unfortunately I deleted it when it didn't work. I think it was
body { color: black ; font-size: "16px" ;
topmargin: "0" ; leftmargin: "0" ;
marginheight: "0" ; marginwidth: "0" }

I have this piece of code in a backup which I copied to
http://tandcl.homemail.com.au/style_1.css
The file includes a lot of code which I removed from my latest copy (or
altered) because it was rejected as illegal.

The result of W3C validation of the backup is at
http://jigsaw.w3.org/css-validator/validator?uri=http://tandcl.homemail.com.au/style_1.css
--
Thanks,
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
?

=?windows-1253?Q?=C1=ED=F4=FE=ED=E7=F2?=

Give this a try:

\\\\\\\\\\\\\\\\\\\\

body
{
font-size: 16px;
margin: 0px;
color: black;
}

..border
{
border-collapse: collapse;
border: 1px solid;
padding: 0px;
background: url(images/parchmnt.gif);
margin: 0px;
}

..menu
{
visibility: hidden;
position: absolute;
}

h1, h2, h3, h4, h5, h6
{
text-align: center;
}

p
{
text-align: left;
}

p.ind10
{
text-indent: 10px;
}

a:link
{
color: blue;
}

a:visited
{
color: fuchsia;
}

a:active
{
color: mediumblue;
}

a:hover
{
color: mediumblue;
}

img
{
border: 0px;
}

////////////////////


_____________________________________________________________
B&D Technologies
http://www.bd-tech.com
Antoni Biliardis - antoni(at)bd-tech.com

Trevor L. wrote, On 02/02/2005 20:52:
 
T

Trevor L.

Thanks, Antoni,

I tried these suggestions. Reading between the lines, it appears that CSS does not use quotes.

When I ran the code through validation, I got the errors below.
(View on this link: http://jigsaw.w3.org/css-validator/validator?uri=http://tandcl.homemail.com.au/style_1.css )

My comments in 12 pt Courier (if you are viewing as HTML)
a.. Line: 1 Context : body
Property color doesn't exist : black

Why not? Should this read "text-color: black" or some other name?

b.. Line: 15 Context : a:active
Invalid number : colormediumblue is not a color value : mediumblue

c.. Line: 16 Context : a:hover
Invalid number : colormediumblue is not a color value : mediumblue

For both of these, it appears that mediumblue is not known to strict CSS and I need a colour such as ##0099FF (I am not sure what octal value gives the same result.)
--
Cheers,
Trevor L.





I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Trevor L.

I tried amending style.css further.

I removed color from body - it now reads:
body { font-size: 16px ; margin: 0px}

a: properties now read:
a:active {color: #0000CC}
a:hover {color: #0000CC}

I ran it through validation and now the font-size on body is rejected
http://jigsaw.w3.org/css-validator/validator?uri=http://tandcl.homemail.com.au/style.css
Line: 1 Context : body
Property font-size doesn't exist : 16px

I am fairly sure that font-size 16px is actually applied; it is simply CSS
validation which rejects it
--
Cheers,
Trevor L.



I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
T

Thomas A. Rowe

The following URL may help you with color selection/conversions issue. I am not going to comment on
CSS.

http://www.ycoln-design.com/WebColorCharts/WebColors.asp

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================


Thanks, Antoni,

I tried these suggestions. Reading between the lines, it appears that CSS does not use quotes.

When I ran the code through validation, I got the errors below.
(View on this link:
http://jigsaw.w3.org/css-validator/validator?uri=http://tandcl.homemail.com.au/style_1.css )

My comments in 12 pt Courier (if you are viewing as HTML)
a.. Line: 1 Context : body
Property color doesn't exist : black

Why not? Should this read "text-color: black" or some other name?

b.. Line: 15 Context : a:active
Invalid number : colormediumblue is not a color value : mediumblue

c.. Line: 16 Context : a:hover
Invalid number : colormediumblue is not a color value : mediumblue

For both of these, it appears that mediumblue is not known to strict CSS and I need a colour
such as ##0099FF (I am not sure what octal value gives the same result.)
--
Cheers,
Trevor L.





I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
R

Ronx

I am sure it is just the validator.
I use the form

body{font: 100% Arial,Helvetica,sans-serif;color:#000000;}

which the validator is happy with.
 
T

Trevor L.

Ron,

Many thanks.

After trying your suggestion and a few others, I came up with this :
body{font: 16px Times New Roman ;color:black; margin: 0px}

and it validated :)))

The validator did suggest, however, that I specify an alternative generic
font. I would have thought that Times New Roman was fairly general. Perhaps
I should try your alternatives of Arial, Helvetica but I don't want one too
large. Both of these take a bit more width and bring in a scroll bar on a
sidebar frame where Times New Roman doesn't.
--
Again thanks to all for their help
Trevor L.


I choose Polesoft Lockspam to fight spam, and you?
http://www.polesoft.com/refer.html
 
S

Stefan B Rusynko

FYI
Always add a closing ; in all styles (to avoid subsequent style failures)

body {font: 16px Times New Roman ;color:black; margin: 0px;}

The reason it now validates is defining a font style (size) w/o including the font (family) is considered invalid

--




| Ron,
|
| Many thanks.
|
| After trying your suggestion and a few others, I came up with this :
| body{font: 16px Times New Roman ;color:black; margin: 0px}
|
| and it validated :)))
|
| The validator did suggest, however, that I specify an alternative generic
| font. I would have thought that Times New Roman was fairly general. Perhaps
| I should try your alternatives of Arial, Helvetica but I don't want one too
| large. Both of these take a bit more width and bring in a scroll bar on a
| sidebar frame where Times New Roman doesn't.
| --
| Again thanks to all for their help
| Trevor L.
|
|
| I choose Polesoft Lockspam to fight spam, and you?
| http://www.polesoft.com/refer.html
|
|
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

CSS learning 4
Help needed with css stylesheet and font and font colour (color) 4
Font size! - I've read other font posts but still won't work 3
Font Size in CSS 2
css in frontpage - problems 4
pages don't work in Firefox? 2
html signature 4
Font/Text size problem Fixed. A 'get-around' that's worked for me 1

Top