Welcome to WebmasterWorld Guest from 54.167.5.15

Forum Moderators: not2easy

Message Too Old, No Replies

Setting font to 62.5% makes text tiny

     

cheaperholidays

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

5+ Year Member



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

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

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Why mix and match? Introduces unnecessary complications. :)

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

cheaperholidays

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

5+ Year Member



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

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

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

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

5+ Year Member



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

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

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

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

WebmasterWorld Senior Member 5+ Year Member



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

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

5+ Year Member



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

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

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

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

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




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

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

WebmasterWorld Senior Member 5+ Year Member



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

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

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



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

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

5+ Year Member




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

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

5+ Year Member



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

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

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month