Hi guys
What's the best way to specify font size using CSS? I try to avoid
absolute units like pt and px because then users can't resize the fonts
in IE, but % and em are a complete pain to use IMO. I read somewhere (a
W3C tip I think) that the best way is to specify a "base" size and then
have all your fonts relative that, but I'm not sure how that works.
TIA
Dec 11 '05
16  3901 
Jim Moe wrote: Els wrote:
What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.
It is a percentage of whatever the size is for the containing element,
yes? If I set the font-size to 85% for a <div>, then 85% again for a <p>
in that div, the final size is 72% of the original font-size spec.
Yup, same goes for 'em' afaik.
I don't find that a problem though. I don't set 85% for a <div> *and*
a <p>. If I want all content of a certain <div> to have a font-size of
85%, I set it as
div.class p{font-size:85%;}
In a properly marked up document, there is no text outside <p>
elements, unless it's in a heading or a table.
Can you give a real life example of a situation where nested
font-sizing might be a problem for you?
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Magnum - Rockin' Chair
Els wrote:
Can you give a real life example of a situation where nested
font-sizing might be a problem for you?
It was just an observation, not a problem. Your original statement
implied that % only referenced the <body> size, not the container's.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jim Moe wrote: Els wrote:
Can you give a real life example of a situation where nested
font-sizing might be a problem for you?
It was just an observation, not a problem. Your original statement
implied that % only referenced the <body> size, not the container's.
Okay, understood now - missed that one :-)
In practice both are almost always true for myself though. I hardly
ever set a font-size to both a child and parent element other than
<body>.
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Live - Stage
Els wrote:
It was just an observation, not a problem. Your original statement
implied that % only referenced the <body> size, not the container's.
Okay, understood now - missed that one :-)
In practice both are almost always true for myself though. I hardly
ever set a font-size to both a child and parent element other than
<body>.
I also. But I am constantly updating our website as I learn more about
HTML and CSS. Occasionally these little issues arise ("Why the hell is
that font so small!") as updates are applied.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Els wrote: Roy Schestowitz wrote: __/ [Els] on Sunday 11 December 2005 18:54 \__ JD wrote:
Hi guys
What's the best way to specify font size using CSS? I try to avoid
absolute units like pt and px because then users can't resize the fonts
in IE, but % and em are a complete pain to use IMO. I read somewhere (a
W3C tip I think) that the best way is to specify a "base" size and then
have all your fonts relative that, but I'm not sure how that works.
Where possible, I prefer to use the font-size keywords, xx-small,
x-small, small, medium, large, x-large and xx-large, though I rarely use
anything smaller than 'small', particularly for body copy. Where more
precise sizes are needed, I use ems, but take care with them because of
the following problem...
What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.
The problem with that approach is that the font sizes are relative to
that of the parent element. For example, if you specify:
li { font-size: 80%; }
Nested lists will get smaller and smaller.
<body>
<ul>
<li>This will be 80% of body
<ul>
<li>This will be 80% of the li, which equals 64% of body
The same issue applies to em and ex as well.
Overall, this probably depends on the page in question. There are cases where
the font size should be relative to the screen/window size. In such
circumstances, 'em' should be used. It takes an example to give a proper
answer, in my humble opinion.
It also takes an example to explain how 'em' is relative to
screen/window size and % isn't.
For font-size, neither the em unit or percentages are relative to to the
screen, window or viewport size at all, they're always relative to the
font size of the parent element.
--
Lachlan Hunt http://lachy.id.au/ http://GetFirefox.com/ Rediscover the Web http://GetThunderbird.com/ Reclaim your Inbox
Lachlan Hunt wrote: Els wrote: Roy Schestowitz wrote: __/ [Els] on Sunday 11 December 2005 18:54 \__
JD wrote:
> Hi guys
> What's the best way to specify font size using CSS? I try to avoid
> absolute units like pt and px because then users can't resize the fonts
> in IE, but % and em are a complete pain to use IMO. I read somewhere (a
> W3C tip I think) that the best way is to specify a "base" size and then
> have all your fonts relative that, but I'm not sure how that works.
Where possible, I prefer to use the font-size keywords, xx-small,
x-small, small, medium, large, x-large and xx-large, though I rarely use
anything smaller than 'small', particularly for body copy. Where more
precise sizes are needed, I use ems, but take care with them because of
the following problem...
That is only one problem with ems. Another one is that a bug in IE
causes the font-size respond exponentially to the visitor's browser's
font-size settings when the <body> font-size is not set in %.
What's the pain in using %?
Just set 100% for <body> (the "base" size), and then use other
percentages like 85% for small print and 120% for headings, etc.
Those are indeed relative to the percentage set for the <body>.
The problem with that approach is that the font sizes are relative to
that of the parent element. For example, if you specify:
li { font-size: 80%; }
Nested lists will get smaller and smaller.
<body>
<ul>
<li>This will be 80% of body
<ul>
<li>This will be 80% of the li, which equals 64% of body
When I have a <ul> that needs to be 80% font-size (not likely! :-P), I
set the font-size to the first <li> only.
li{font-size:80%;}
li li{font-size:100%;}
That is, if I would have a good reason not to set it on the container:
div.navigation{ font-size:80%;}
The same issue applies to em and ex as well.
Overall, this probably depends on the page in question. There are cases where
the font size should be relative to the screen/window size. In such
circumstances, 'em' should be used. It takes an example to give a proper
answer, in my humble opinion.
It also takes an example to explain how 'em' is relative to
screen/window size and % isn't.
For font-size, neither the em unit or percentages are relative to to the
screen, window or viewport size at all, they're always relative to the
font size of the parent element.
That's what I meant ;-)
--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Spargo - Hip Hap Hop
On Sun, 11 Dec 2005 18:45:28 +0000, JD <us**@example.n et> wrote: in IE, but % and em are a complete pain to use IMO.
So don't use them then. The default settings for fonts will cover most
of what you need already. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
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
|
by: Mark Johnson |
last post by:
Oddly enough, I found it difficult, using Google, to find a list of
best-of sites based on the quality of their css packages.
So I'd ask. Does anyone know of particularly good sites which are in
good measure because of their creative and useful css designs? I'm
aware of Zen Garden and a few others. So don't bother with those. And
I hope I don't get replies from people with a 'tin ear' and no design
sense. Good sites. Good pages. That's...
|
by: Mike Button |
last post by:
Hello all,
I am really really desperate on what I should do, and I am asking for help
from anyone in this newsgroup, here's the situation:
I am creating a form that is being run on a server where there is no scripts
allowed running (the software is from Opentext called Livelink)- therefore I
need javascript to do the tasks listed below:
1. validate the form - this has been completed
2. pop up another window that will go ahead and...
|
by: Yeah |
last post by:
Is there a way to tell CSS to specify one font for a table that has many
cells in which the font is being used? As in, one font that represents the
table itself (rather than specifying in every cell)
Thanks! :-)
|
by: FLEMEF |
last post by:
Hello All, I'm not very good at Java...
With this piece of Java code, how could I modify the StyleOptions.java program to allow the user to specify the size of the font, while using the text field to obtain the user’s input.
Thanks.
-----------------------------------------------------------------
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
| | |
by: Muchach |
last post by:
Hello,
Ok so what I've got going on is a form that is populated by pulling
info from database then using php do{} to create elements in form. I
have a text box in each table row for the user to enter input. I need
to take this user input and put it back into the database. What would
be the best method to do this. I can't use a normal post because the
name of the text box is the same for each table row. I've heard that
posting the...
|
by: hotflash |
last post by:
Hi All,
I found the best pure ASP code to upload a file to either server and/or MS Access Database. It works fine for me however, there is one thing that I don't like and have tried to fix but don't have any luck is to do a form validation. This script requires the files: db-file-to-disk.asp and _upload.asp. There is a DESCRIPTION field in the db-file-to-disk.asp file, what I want to do is the user has to field out this fied before...
|
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...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
| | |
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...
|
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...
|
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();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| |
