473,699 Members | 2,625 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

About font sizes

As I understand it, most browser manufacturers have agreed on 16px for their
default font size.

So, this should be an accurate conversion for percentages:

px %

16 = 100
14 = 87.5
13 = 81.25
12 = 75
10 = 62.5

I assume it's better to stick to a percentage that will yield a round number -
rather than using something like 90% to get 14.4. A browser will just round up
or down to a font size it can display, correct?

As for em, am I correct in saying 1em = 16px?

Does that mean 1.2em is 19.2px (rounded by the browser to 19px - if the default
size is 16)?

Jun 10 '06
60 4770
David Dorward <do*****@yahoo. com> scripsit:
Systems can round font sizes to something acceptable, so there's not
really any point in worrying about it.


Unfortunately, there is.

Typography rules say, among other things, that a change in font size should
be clear enough so that it does not look like an error. The mileage varies,
but let us assume that a 10% increase is desired. So if we say font-size:
110%, what will happen? The browser computers the absolute font size and
then selects the closest actual font size it can use - at the simplest,
selecting among differently sized fonts for the given font family
(typeface). For all we can know, that size could be identical to the basic
font size (when only a few sizes exist). Or it might be almost 20% larger
than the basic font size.

For example, if the basic font size is 12pt, then 110% yields 13.2pt, which
I would expect to get rounded to 13pt. However, for Times New Roman, I seem
get a bigger font (13.5pt?), which is rather big and looks bolded. If I set
the font size to a smaller percentage, there's the risk of getting no font
size increase, for some combinations of font face and basic size.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Jun 10 '06 #11
To further the education of mankind, David Dorward <do*****@yahoo. com>
vouchsafed:
Chris Hughes wrote:
16px? That's eNORMous! (I just tried it.) 12px would be more
reasonable, surely?


That depends on the resolution of the screen and its physical
dimensions. 16px is tiny on an 21" 800x600 display but huge on a 14"
1600x1200 display.


Surely you meant that the other way around?

--
Neredbojias
Infinity has its limits.
Jun 11 '06 #12
> Typography rules say, among other things, that a change in font size should be
clear enough so that it does not look like an error. The mileage varies, but
let us assume that a 10% increase is desired. So if we say font-size: 110%,
what will happen? The browser computers the absolute font size and then
selects the closest actual font size it can use - at the simplest, selecting
among differently sized fonts for the given font family (typeface). For all we
can know, that size could be identical to the basic font size (when only a few
sizes exist). Or it might be almost 20% larger than the basic font size.

For example, if the basic font size is 12pt, then 110% yields 13.2pt, which I
would expect to get rounded to 13pt. However, for Times New Roman, I seem get
a bigger font (13.5pt?), which is rather big and looks bolded. If I set the
font size to a smaller percentage, there's the risk of getting no font size
increase, for some combinations of font face and basic size.
Yes, this is exactly what I am concerned about.

If I want to avoid specifying px for font sizes, using percentage instead, and
use this as a rough guide:
16 = 100
14 = 87.5
13 = 81.25
12 = 75
10 = 62.5


I run the risk that a font may not have a 13px size (81.25%)

Furthermore, if the user has set his default font size to something other than
the manufacturer's default (16px), then it's a crap shoot what size font will
render at a particular percentage.

So percentage may make it easier for the user to adjust the font size, but px is
the only way to have absolute control of what gets displayed.

Yet it seems IE is the only browser that cannot adjust px-specified font sizes.
If my audience is strictly FF users, then why not specify px font sizes? They
are just as adjustable as anything else.

Jun 11 '06 #13
Neredbojias <http://www.neredbojias .com/fliam.php?cat=a lt.html> wrote:
That depends on the resolution of the screen and its physical
dimensions. 16px is tiny on an 21" 800x600 display but huge on a 14"
1600x1200 display.


Surely you meant that the other way around?


Err. Yes.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jun 11 '06 #14
deko wrote:
Furthermore, if the user has set his default font size to something other
than the manufacturer's default (16px), then it's a crap shoot what size
font will render at a particular percentage.
And since you don't know if the user has specified their preference as
something other than 16px, its /always/ a crap shoot.
So percentage may make it easier for the user to adjust the font size, but
px is the only way to have absolute control of what gets displayed.
Thank goodness for minimum font size options...
If my audience is strictly FF users, then why not specify px font sizes?


Percentage also allows the author to respect the user's font size preference
and leave body text at whatever the user specified.

--
David Dorward <http://blog.dorward.me .uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Jun 11 '06 #15
> Percentage also allows the author to respect the user's font size preference

That's not true if I use a percentage that specifies a non-existent font size.
We are back to the crap shoot. The only way a percentage has any correlation to
a user preference is if that percentage is 100%. Otherwise you never know what
you're going to get - that is not respecting the user's preferences.

If I specify 125% for h2, which should be about 20px, I can only hope there is a
corresponding font with a 20px definition. Maybe there is something close, but
maybe there isn't. For all I know, the browser may not change the font size at
all.

So it makes absolutely no sense to use percentages.

The only way to give the user control over font size is to not specify any.

The goal here is simply to allow the user to adjust the font size if he desires.

It makes no difference whatsoever if a web page defines font size in percentage
or px if the user's browser can scale the font size. If all the mainstream
browsers have the ability to scale px then you are better off using px to ensure
proper presentation of the page.
Jun 11 '06 #16
On Sun, 11 Jun 2006, deko wrote:
If I specify 125% for h2, which should be about 20px, I can only
hope there is a corresponding font with a 20px definition. Maybe
there is something close, but maybe there isn't. For all I know,
the browser may not change the font size at all.
Lynx won't change the font size. Neither will a speaking browser.

Presentation proposals are optional, by design.
So it makes absolutely no sense to use percentages.
By your argument, it makes no sense to propose /any/ font size, since
some browsers, by design, will ignore the proposal. I don't accept
that argument.
The only way to give the user control over font size is to not
specify any.
Illogical, Mr. Spock. Most browsers which implement font sizing have
a reasonable range of font sizes available, and will use them. The
CSS specification includes some practical suggestions for usable size
increments.
It makes no difference whatsoever if a web page defines font size in
percentage or px if the user's browser can scale the font size.
The specification allows for the possibility that the user could
/override/ the author's font size choices. Please be quite clear that
a specification-conforming override of absolute font sizing would not
scale the absolute size specifications - it would /override/ them.
If all the mainstream browsers have the ability to scale px
If you rule out browsers which implement the specification!
then you are better off using px to ensure proper presentation of
the page.


Your conclusion rests on a false premise (&/or depends on the fact
that there are browsers which choose to ignore the specification in
this regard). That's no way to decide on a good policy.
--

Beware of negative easements.
Jun 11 '06 #17
>> If I specify 125% for h2, which should be about 20px, I can only
hope there is a corresponding font with a 20px definition. Maybe
there is something close, but maybe there isn't. For all I know,
the browser may not change the font size at all.


Lynx won't change the font size. Neither will a speaking browser.

Presentation proposals are optional, by design.
So it makes absolutely no sense to use percentages.


By your argument, it makes no sense to propose /any/ font size, since
some browsers, by design, will ignore the proposal. I don't accept
that argument.


Not that the proposal will be ignored, but rather that the proposal will be
misinterpreted.

Using a percentage-based scale that requires rounding to a valid font size is
inherently inaccurate if the basis for the scale (user preference) is unknown.
The only way to give the user control over font size is to not
specify any.


Illogical, Mr. Spock. Most browsers which implement font sizing have
a reasonable range of font sizes available, and will use them. The
CSS specification includes some practical suggestions for usable size
increments.


This is meaningless unless we all agree on a basis for the scale. If everyone
who uses a browser agrees to set his default font size to 16, then we have a
chance at hitting those usable size increments, otherwise it's a crap shoot.
It makes no difference whatsoever if a web page defines font size in
percentage or px if the user's browser can scale the font size.


The specification allows for the possibility that the user could
/override/ the author's font size choices. Please be quite clear that
a specification-conforming override of absolute font sizing would not
scale the absolute size specifications - it would /override/ them.


well, this is semantics... override vs. scale... who cares. turn the knob one
way, the font gets bigger; the other way, smaller. That's all that matters.

Jun 11 '06 #18
On Sun, 11 Jun 2006, deko wrote:
By your argument, it makes no sense to propose /any/ font size,
since some browsers, by design, will ignore the proposal. I don't
accept that argument.
Not that the proposal will be ignored, but rather that the proposal
will be misinterpreted.


But that's exactly what you're hoping for! You say you want to
specify pt or px units, *but* you want the browser to misinterpret
them as relative units. That isn't what the specification says, and
so you're relying on the generosity of browsers like Moz, Opera etc.
to disregard what you're asking for, and treat it as something
different. Whereas IE, in this respect, is doing what the
specification calls for, and taking you at your word that absolute
sizing is required.

If, on the other hand, you would use appropriate sizing units, you
wouldn't need to rely on user-friendly browsers not taking your
proposals seriously, and you wouldn't have to face the problem of
visually disabled users of IE needing to find an obscure option to
disable font sizing.
Using a percentage-based scale that requires rounding to a valid
font size is inherently inaccurate if the basis for the scale (user
preference) is unknown.
That's the reality of designing for the web. So cope with it.
Most browsers which implement font sizing have a reasonable range
of font sizes available, and will use them. The CSS specification
includes some practical suggestions for usable size increments.


This is meaningless unless we all agree on a basis for the scale.


How so? It's not ideal, but it adapts better to a wide range of
presentation situations than anything else I have seen. If you were
so determined to get pixel-exact rendering, you'd be better advised to
use PDF - but I don't suppose your users would thank you for it.
If everyone who uses a browser agrees to set his default font size
to 16,
What colour is the sky on your planet?
The specification allows for the possibility that the user could
/override/ the author's font size choices. Please be quite clear
that a specification-conforming override of absolute font sizing
would not scale the absolute size specifications - it would
/override/ them.


well, this is semantics...


Seems to me that you're missing the point.
override vs. scale... who cares.
If the user overrides your sizing, then your sizing proposals have
*no* effect. The user gets h1, h2, p, big, small etc. sized as
determined by /their/ browser or stylesheet, irrespective of your
intentions.
turn the knob one way, the font gets bigger; the other way, smaller.
That's all that matters.


Really?
Jun 11 '06 #19
On Sat, 10 Jun 2006, Jukka K. Korpela wrote:
Typography rules say, among other things, that a change in font size
should be clear enough so that it does not look like an error. The
mileage varies, but let us assume that a 10% increase is desired. So
if we say font-size: 110%, what will happen? The browser computers
the absolute font size and then selects the closest actual font size
it can use - at the simplest, selecting among differently sized
fonts for the given font family (typeface). For all we can know,
that size could be identical to the basic font size (when only a few
sizes exist). Or it might be almost 20% larger than the basic font
size.
I don't disagree with what you have written, as a theory. But what
conclusions do you draw in terms of recommendations to authors?
For example, if the basic font size is 12pt, then 110% yields
13.2pt, which I would expect to get rounded to 13pt. However, for
Times New Roman, I seem get a bigger font (13.5pt?), which is rather
big and looks bolded. If I set the font size to a smaller
percentage, there's the risk of getting no font size increase, for
some combinations of font face and basic size.


Yes; and I get very different visual results depending on how I have
set my font smoothing options. But these details of user settings are
not something which an author can (or should) know, nor take into
account in their CSS.

regards
Jun 11 '06 #20

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
2731
by: Hostile17 | last post by:
What's considered to be the definitive version of a "good font settings" style sheet? That is, one which allows nearly all modern browsers, and Netscape 4, to get readable text. The basis of this is at http://www.alistapart.com/stories/sizematters/ -- the column "Size Matters" by Todd Fahrner. The concept, as I understand it, is set Netscape 4 fonts to specific
131
21658
by: Peter Foti | last post by:
Simple question... which is better to use for defining font sizes and why? px and em seem to be the leading candidates. I know what the general answer is going to be, but I'm hoping to ultimately get some good real world examples. Fire away! :) Regards, Peter Foti
7
3699
by: gino | last post by:
Dear all, My monitor was set to 1600x1200 so the fonts in IE is too small for me even when I set the "View->Text Size->Largest"... I don't have previlage to change the monitor resolution... so I have to try to "hardcode" IE to display any webpage by a scale of 200%...
23
3752
by: BobK | last post by:
Hello Everyone, I am updating the CSS for my site but want new and original page to appear the same. My original CSS permits small increments of zooming (ctrl/mouse wheel) so that you get perhaps 3 usable levels of zoom. The increments are small and it only has 4 zoom levels. Same thing with changing resolutions. When you change from 1280x1024 to 800x600 the page looks acceptable after changing the zoom a click or two.
39
8658
by: David Jubinville | last post by:
Hi All, I've run into a bit of an interesting problem with CSS and font DPI and would certainly welcome help. Problem: Page layout defined in CSS has font size issues (overlapping frames, text overflowing out of popup window, etc) on a windows systems using 120dpi fonts (large fonts), but everything looks perfect in 96dpi small fonts.
300
18354
by: Ståle Sæbøe | last post by:
I am a bit curious about this. The graphic design people I work with say it is their preferred font for web pages. The reason being that it is "kinder" to the eye both in terms of shape and size. The HTML "hardcore elititst" profess that it is a useless font because it is too big compared to other fonts. Personally I do not care one way or the other, but I generally trust
40
2965
by: Paul Davis | last post by:
Hi all, I'm building some style sheets and trying to play the old game of balancing designer pixel perfection and still allowing users to adjust their font sizes. The compromise I've made with the designer is that he'll accept allowing users to change font sizes it it "looks right" with the default setting. I'm using em to set the font size. So, anyway, here's the problem. At 0.96em we get the perfect font size. But, if the font is...
16
5790
by: Frank Steinmetzger | last post by:
Hello Group On my website I used to have Tahoma 8pt defined in my CSS styles. That gives me the "normal" font Windows uses everywhere in its dialogues. However, on Linux things seem to be different. If I want a font equal in size to Windows' Tahoma 8pt, I need to set 11 as font size. This has the result that text on my website is too small for Linux systems at the moment. Could you tell me what I need to do in order to get the same...
53
5247
by: Jonas Smithson | last post by:
In his book "CSS: The Definitive Guide" 2nd edition (pgs. 116-117), Eric Meyer has an interesting discussion about "font-size-adjust" that was evidently dropped in CSS 2.1 due to browser non-support. I'm wondering if there's some way I could still get a primitive version of this functionality, because different fonts display at very different optical sizes for the same nominal sizes. For example, suppose I want type to display in...
0
8687
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8615
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8883
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6534
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5874
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4376
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
4629
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
2
2347
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2009
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.