homepage Welcome to WebmasterWorld Guest from 54.204.215.209
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Setting font to 62.5% makes text tiny
cheaperholidays




msg:4400464
 11:25 am on Dec 22, 2011 (gmt 0)

hi all

I have usually set the base font size to 100% as in

font:100% Arial, Verdana, Sans-Serif;

Then used 1em for text size, but changing base font to 62.5%, and then upping text to say 1.2em which is 12px approx.

Make the text look rather small, am i missing something here...

Also setting the base font size to 62.5% made some text so tiny it was unreadable...

 

tangor




msg:4400466
 11:32 am on Dec 22, 2011 (gmt 0)

Why mix and match? Introduces unnecessary complications. :)

Pick either ems, percents or pixels and go from there. (I use ems)

cheaperholidays




msg:4400467
 11:35 am on Dec 22, 2011 (gmt 0)

Hi Tangor

Yes i like ems but 1em seems rather large when your browser testing, so i wanted to try to set a smaller text size, the 62.5% thing should have worked...

tangor




msg:4400476
 12:09 pm on Dec 22, 2011 (gmt 0)

In any case what we as webmasters might like to use there is the end user who ALSO has the ability to change font sizes. 1em is Normal... and most users don't fiddle phart with that. Also remember, your eyes might be younger/keener than the person next to you.

I was commenting on the mix of font directives in OP...

Try .07em instead of 62.5%

Will still be too small, but you get the idea...

cheaperholidays




msg:4400482
 12:24 pm on Dec 22, 2011 (gmt 0)

Yes i agree but i have not mixed the font directives or should i say font:100% then leave individual divs to take that size...

tangor




msg:4400483
 12:32 pm on Dec 22, 2011 (gmt 0)

You've indicated a percent, then use an em against a basefont?

Use one or the other. I K.I.S.S. with font sizing. (ie, either em OR percent OR pixel... I never mix them)

editing myself: I specify a font
Later I specify a font size regarding its use such as:

Heading
BodyText (p)
etc.

I don't start at 100% then base at 62.5% and expect 1.2em to be 12 points. Asking a lot of calculation from the browser. Browser only has to deal with one kind of math and results will be more predictable.

alt131




msg:4400489
 1:17 pm on Dec 22, 2011 (gmt 0)

Why mix and match? Introduces unnecessary complications.
Not quite: Older ie would not allow fonts specified in px to scale, and keywords were not consistent cross-browser or -platform. That meant ems or % for finer control. Some lengths could not be specified in %, or some browsers weren't that accurate, especially to decimal places, so that left ems. Assuming 16px as the default size, which was frequently too large, 62.5% as the base meant 1em=10px, 1.2em=12px, etc.*** See Clagnut's How to size text using ems [clagnut.com] and the ALA article. So the %/em combination was the least complicated way to achieve consistent font-sizes while allowing some degree of control as required for design.

the 62.5% thing should have worked
cheaperholidays, not quite sure what you mean by that, but 62.5%/10px was always considered too small for readability by many of the advocates of this technique, depending on font and colour 12px may be too small as well - and 100% too large. For that reason another common setting was 76%, which broke the 16px@62.5%=10px relationship, but created a workable size to begin with.

I don't think the issue is whether a font is a particular size or is specified in a certain way. For me the issue is whether it is readable.

So, given all the possible user, browser and platform variations, I think this is coder choice - use what will allow you to deliver the most readable sizes to the user as efficiently as possible. w3org has a tip sheet on techniques in Care With Font Size [w3.org]. That said, I'm old enough to still be wary of keywords. %+ems works for me ;)

Edit
***which made the maths easy for coders.

cheaperholidays




msg:4400507
 2:01 pm on Dec 22, 2011 (gmt 0)

The problem i have is this, if i set the base font size to anything less than 100% the text virtually disappears.

font:100% Arial, Verdana, Sans-Serif;

I tried your 76% size same thing happened, i have tried removing font size from the divs as well as setting it to 1em

tangor




msg:4400512
 2:18 pm on Dec 22, 2011 (gmt 0)

Correct me if I'm wrong, but isn't the default "size" 100% from the get go?

Second, are we not dealing with much higher screen resolutions than the "old days"? Do we not have zoom capability built into every browser... and most are using that because the "webmaster make it pretty default font size is too small"?

That said, I PERSONALLY don't code for picture perfect placement. If I want that I provide a PDF or an image. HOWEVER, I do want reasonable font variations between body, headers, sub-headers, "small print" and use ems to suggest that. And if one has used zoom in the browser display and forgot to reset that might be part of the display problem.

Fotiman




msg:4400520
 2:35 pm on Dec 22, 2011 (gmt 0)


<!DOCTYPE html>
<html>
<head>
<style>
#base {
font-size: 62.5%;
}
#increased {
font-size: 1.2em;
}
#twelvepx {
font-size: 12px;
}
</style>
</head>
<body>
<div id="base">
<div id="increased">
The quick brown fox jumped over the lazy dog.
</div>
</div>
<div id="twelvepx">
The quick brown fox jumped over the lazy dog.
</div>
</body>
</html>

That example shows that your calculation was correct. 62.5% of the default (16px) = 10px. 10px * 1.2em = 12px. Viewing the example above will show that both lines look the same. The problem is simply that 12px is just too small for most text.

alt131




msg:4400784
 4:48 am on Dec 23, 2011 (gmt 0)

The problem i have is this, if i set the base font size to anything less than 100% the text virtually disappears.
Hmmm ... while 12px is small, it shouldn't almost "disappear".
Is that only happening for you, or for multiple multiple users? Plus, is this the same issue you were having back in Navwrapper interfering with page font sizes [webmasterworld.com]? I am asking because if it is just you then it is likely to be your settings, or your eye-sight. If it is more than your set-up/you and a long term problem, then we need to dig deeper.

Fotiman, that's a great test thanks! cheaperholidays, can you look at that and tell us if the words seem very, very small, or just normal (but small) 12px.

Second, are we not dealing with much higher screen resolutions than the "old days"? ...
Generally yes, but you asked why the OP was mixing % and ems.
lucy24




msg:4400790
 6:25 am on Dec 23, 2011 (gmt 0)

I am completely missing something here, beginning with the thread title.
"Setting font to 62.5% makes text tiny"

WELL, DUH it makes it tiny. You have set your font to five-eighths-- that's not much more than one-half-- of the default. How could that not make it tiny?

Now, I know some web designers have trouble with this, but here goes anyway. Every browser has a default font size, either built in or set by the user. That size can be expressed as "100%" or "medium" or "1em". If you set the main font size to significantly less than the user's default-- "62.5%" or ".625em" or "x-small" or, worst of all, "8pt"-- then the user has a choice of actions.

Not all browsers allow both #1 and #2.

#1 Zoom the text. The words will no longer fit into the page design, which generally assumes a certain relationship between text size and overall size.

#2 Zoom everything. The page is no longer visible all at once in its full glory, the way the designer wanted it to be seen.

#3 Leave
The
Site.

Don't know about your average user, but I almost never mess with #1 or #2. I proceed directly to #3.

cheaperholidays




msg:4400876
 2:10 pm on Dec 23, 2011 (gmt 0)


Hi Fotiman, Tested the page, looks about normal if a bit small..

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

I think the problem was a container div that was somehow blocking the default font size..

I have now left it at 100% thanks everyone.

cheaperholidays




msg:4401891
 6:56 am on Dec 28, 2011 (gmt 0)

Update: The navwraper div was not closed and consequently set the page font to .74em, which when i tried to set the body font to 62.5% made the text so small it was almost a line.

So when i closed the navwraper Div </div> and set the body font set to 100%, the page text then reverted to default size 16px, so to correct this, i set the content div to .75em which should be 12px.

This seems to be good default text size.


On another subject we have a <snip> blog with the font set at 100% and the content set at 1em but oddly this seems to be about 12px how can a blog and our main page behave so differently?

[edited by: alt131 at 7:36 am (utc) on Dec 28, 2011]
[edit reason] Thread Tidy [/edit]

penders




msg:4401896
 8:31 am on Dec 28, 2011 (gmt 0)

On another subject we have a <snip> blog with the font set at 100% and the content set at 1em but oddly this seems to be about 12px how can a blog and our main page behave so differently?


- different font? "Times New Roman" for instance will look smaller at the same font-size than say Verdana. (Fonts with differing x-heights ?)

- monospace font? Sometimes the browser default for monospace fonts is smaller than for proportional fonts. This is certainly the case with Firefox 3.6 (16px for proportional, but only 13px for monospace) - not sure about later versions.

- Additional styles elsewhere in the CSS? Errors in CSS, malformed HTML? Validate, validate, validate... :)

The browser developer tools should be able to tell you were the font styles are coming from.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved