f



Styling <body> with font specifications

I'm taking an online HTML5/CSS3/Javascript course at Johns Hopkins, 
and the instructor put things like font-size and color in his style 
sheet as styles for the body element.

I think I remember that that was discussed here years ago, and the 
consensus was that doing so was insufficient; you needed to apply 
font-type styles to something like p, li, th, td.

Question 1: If I specify font-type styles only for body, will those 
be inherited by p, li, td, etc/?

Question 2: If the answer is yes, has it always been that way and my 
memory is just wrong, or is that something new in CSS3?

-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
11/3/2016 2:09:08 AM
comp.authoring.stylesheets 8158 articles. 0 followers. mdmoura (161) is leader. Post Follow

19 Replies
195 Views

Similar Articles

[PageSpeed] 25

Stan Brown <the_stan_brown@fastmail.fm> wrote

> I'm taking an online HTML5/CSS3/Javascript course at Johns Hopkins, 
> and the instructor put things like font-size and color in his style 
> sheet as styles for the body element.
> 
> I think I remember that that was discussed here years ago, and the 
> consensus was that doing so was insufficient; you needed to apply 
> font-type styles to something like p, li, th, td.
> 
> Question 1: If I specify font-type styles only for body, will those 
> be inherited by p, li, td, etc/?

Yes, they will.  

> 
> Question 2: If the answer is yes, has it always been that way and my 
> memory is just wrong, or is that something new in CSS3?
> 

IIRC, there was something about tables not inheriting font-type back in 
the day, but it does now.

-- 
Adrienne Boswell
http://cavalcade-of-coding.info - Arbpen Designs
http://the-good-plate.com - Gourmet fresh food on a budget
0
Adrienne
11/3/2016 2:17:00 AM
On 03/11/2016 04:09, Stan Brown wrote:
> I'm taking an online HTML5/CSS3/Javascript course at Johns Hopkins,
> and the instructor put things like font-size and color in his style
> sheet as styles for the body element.

The question that interests me is: why is he setting font-size there at 
all? IOW, why he want's to (most probably) change my default body text size?

-- 
Best wishes, Osmo
0
Osmo
11/3/2016 4:54:17 AM
3.11.2016, 4:17, Adrienne Boswell wrote:

> Stan Brown <the_stan_brown@fastmail.fm> wrote
[...]
>> Question 1: If I specify font-type styles only for body, will those
>> be inherited by p, li, td, etc/?
>
> Yes, they will.

Rather, they may. One may even say that they do �by default�, but this 
is a loose expression.

For example, if another style sheet (e.g. a user style sheet) contains, 
say, td { color: red }, the no td element can inherit color from its parent.

It is very unlikely that elements like p and li have font-type style 
settings in browser style sheets (thought there is no law against that). 
It is rather unlikely that user style sheets contain such settings for 
them. But it is imaginable. For example, the following could make 
perfect sense in a user style sheet, for a particular user:

* { font-size: 24pt !important; font-family: Noto Serif !important; }

This means that no element can inherit font-size or font-family.

(If you think user style sheets are not used much, you are right. But 
they can be very important when they are used. Moreover, using them is 
getting simpler. E.g. in Chrome, the Stylebot add-on lets you set user 
style sheets, globally or on a per-site basis, with a rather limited 
understanding of CSS. You won�t even need !important, since Stylebot 
implicitly adds it.)

And there are some elements that do have default font-type styles in 
browser style sheets. In addition to the obvious suspects like tt,
elements like code, address, and textarea all have such settings.

>> Question 2: If the answer is yes, has it always been that way and my
>> memory is just wrong, or is that something new in CSS3?
>
> IIRC, there was something about tables not inheriting font-type back in
> the day, but it does now.

It depends... on the mode. Demo:

<title>Test</title>
<style>
body { font-size: 24pt; }
</style>
Hello world
<table>
<tr><td>Cell
</table>

This puts browsers to �quirks mode� (as there is no doctype 
incantation), and e.g. the newest version of Chrome still behaves the 
way browsers used to do two decades ago: the font size in the cell is 
not affected, i.e. the setting on body does not get inherited there.
If you slap <!doctype html> at the start, this (mis)behavior vanishes.

We might expect to avoid such problems if we use <!doctype html>, though 
the choice of browser mode is actually rather complicated and poorly 
documented. On the other hand, �quirks mode� is... quirky anyway, so if 
your documents somehow get into that... state, you can expect oddities 
of many kinds. But regarding the specific problem I mentioned, there is 
a simple precaution:

table { font-size: 100%; }

(Technically it does not cause inheritance, rather breaks it. But in 
practice it does the same thing: a <table> element is set to the same 
font size as its parent, and the descendants of the <table> then inherit 
from it � this was never a problem, I think; the problem was that long 
ago, people who wrote browsers thought, for some reason, that a <table> 
element should not inherit some properties from its parent.)

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
11/3/2016 9:47:19 AM
Osmo Saarikumpu <osmo@weppipakki.com> wrote on 03 Nov 2016 in
comp.infosystems.www.authoring.stylesheets: 

> On 03/11/2016 04:09, Stan Brown wrote:
>> I'm taking an online HTML5/CSS3/Javascript course at Johns Hopkins,
>> and the instructor put things like font-size and color in his style
>> sheet as styles for the body element.
> 
> The question that interests me is: why is he setting font-size there at 
> all? IOW, why he want's to (most probably) change my default body text
> size? 

Since there is no general answer to the [even most probable] reasons of 
another's persons sane or insane behavour, why not just ask him?

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
0
Evertjan
11/3/2016 10:25:24 AM
Jukka K. Korpela wrote:

> 3.11.2016, 4:17, Adrienne Boswell wrote:
>> Stan Brown <the_stan_brown@fastmail.fm> wrote
> [...]
>>> Question 1: If I specify font-type styles only for body, will those
>>> be inherited by p, li, td, etc/?
>> Yes, they will.
> 
> Rather, they may. One may even say that they do “by default”, but this
> is a loose expression.
> 
> For example, if another style sheet (e.g. a user style sheet) contains,
> say, td { color: red }, the no td element can inherit color from its
> parent.

Incorrect;

  - the “td” elements that are matched by a selector

      * that either has the same specificity and follows this ruleset
        (in the same or another stylesheet resource) [1], 

        or
    
      * whose specificity is greater

    and

      * has a “color: inherit” declaration attached [2], or
  
  - a ruleset that contains a “color: inherit !important” declaration [3],
   
    or

  - such a “color” property declaration that is contained in an (X)HTML 
    “style” attribute value [4], or in an equivalent attribute’s value in
    other markup languages,

allow that to happen.

The same applies to “color” declarations that contain the “unset” keyword in 
their value for properties whose initial value is “inherit” (for the “color” 
property this depends on the element type per the user agent stylesheet, see 
below), where the former keyword is supported.

Examples:

[1] td { color: inherit; }                /* specificity:  1 ¹) */
[2] td:first-of-type { color: inherit; }  /* specificity: 11    */
[3] * { color: inherit !important; }      /* specificity:  0    */
[4] <td … style="color: inherit">…</td>   <!-- specificity: highest -->

<https://developer.mozilla.org/en-US/docs/Web/CSS/color>
<https://www.w3.org/TR/2011/REC-css3-color-20110607/#foreground>
<http://dev.w3.org/csswg/css3-color/>
<https://www.w3.org/TR/2016/CR-css-cascade-3-20160519/>

_________
¹) based on <https://specificity.keegan.st/> p.

But question 1 was about inheriting font styles, not color:

<https://developer.mozilla.org/en-US/docs/Web/CSS/font-style> pp.


Web browsers and other user agents have default (“user agent”) stylesheets 
for elements, so defining a font style (or another style) for the “body” 
element does not guarantee that all elements contained therein use the same 
font style (or the respective other style).  And, as has been mentioned, 
user stylesheets may contain declarations that override all other 
declarations except “!important” user agent declarations and transition 
declarations:

<https://www.w3.org/TR/2016/CR-css-cascade-3-20160519/#cascading>

Bottom line: Thorough tests are mandatory for quality assurance.


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).
0
Thomas
11/3/2016 12:26:41 PM
>The question that interests me is: why is he setting font-size there at 
all? IOW, why he want's to (most probably) change my default body text size?

So that the page will look well-balanced?
0
Ram
11/4/2016 1:49:58 PM
On 2016-11-05 11:51, Stan Brown wrote:
> Periodically, someone announces that they are changing existing pages to
> HTML5 and CSS3, and someone else asks "why?"  I think for me the answer may
> be that it's an opportunity to simplify my stylings, and things are more
> likely to turn out as I wish because there are fewer special cases. And it's
> also an opportunity to revisit design decisions I made, and maybe make them
> better this time.

I've had the "why?" thrown at me...

For me it's an opportunity to work with something not z/OS, to get some (basic) 
knowledge about these technologies/languages/whatever. As for the "wasting" time 
on it, I've been unemployed for a long time, and I don't consider the time 
trying to get to grips with the intricacies of the CSS model a waste.

I'm unlikely to ever reach the level of knowledge of CSS and HTML that I have of 
PL/I, REXX, CICS or DB2 on z/OS, but as long as it allows me to create my 
<http://prino.neocities.org/> site with a reasonably consistent, and some or 
more than some of you may say, somewhat quirky, look and feel, I'm a happy bunny.

Robert
-- 
Robert AH Prins
robert(a)prino(d)org
0
Robert
11/5/2016 1:01:01 AM
On 04/11/2016 15:49, Ram Tobolski wrote:
>> The question that interests me is: why is he setting font-size there at
> all? IOW, why he want's to (most probably) change my default body text size?
>
> So that the page will look well-balanced?

Good morning class!

Yesterday we learned that we don't have to set the font-size for 
different child elements, as we may let our text paragraphs, list items 
and table data cells inherit the value.

Today our first aim was to show how a Web page (that contains text to be 
read by the user) needs the font-size setting in order to look 
well-balanced. Unfortunately my skills fail here, but perhaps Mr. 
Tobolski, or anybody else, will take over and demonstrate how a Web page 
loses it's well-balanced look when the font-size declaration is omitted.

-- 
Best wishes, Osmo
0
Osmo
11/5/2016 7:21:55 AM
5.11.2016, 9:21, Osmo Saarikumpu wrote:

> Unfortunately my skills fail here, but perhaps Mr.
> Tobolski, or anybody else, will take over and demonstrate how a Web page
> loses it's well-balanced look when the font-size declaration is omitted.

Well, the usual demonstration used to be like this: By default, browsers 
use Times New Roman as the font. It’s ugly. (Actually it isn’t, but it 
didn’t look good on early display devices with low resolution.) So we 
set the font family to Arial. (This used to be one of the few feasible 
options.) Say, body { font-family: Arial, sans-serif }. Now the text 
looks huge. (Actually, just large – to most people.) So we set the font 
size.

There used to be different schools of thought, some setting the size in 
% or em, some setting it in pt or maybe px. In most browsing situations 
it didn’t really matter, as long as the calculations were based on an 
assumed default size of 12pt. But in some situations, it could make a 
huge difference.

Now I leave the floor to anyone who wishes to step in and demonstrate
why this basic reasoning doesn’t apply any more. And perhaps suggest a 
different approach to be taken. If you set font-family (and who doesn’t, 
these days?), do you accept the browser default for font-size, even 
though you know it will mostly look too large?

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
11/5/2016 9:53:49 AM
On Thu, 3 Nov 2016 02:17:00 -0000 (UTC), Adrienne Boswell wrote:
> 
> Stan Brown <the_stan_brown@fastmail.fm> wrote
> 
> > I'm taking an online HTML5/CSS3/Javascript course at Johns Hopkins, 
> > and the instructor put things like font-size and color in his style 
> > sheet as styles for the body element.
> > 
> > I think I remember that that was discussed here years ago, and the 
> > consensus was that doing so was insufficient; you needed to apply 
> > font-type styles to something like p, li, th, td.
> > 
> > Question 1: If I specify font-type styles only for body, will those 
> > be inherited by p, li, td, etc/?
> 
> Yes, they will.   
> > 
> > Question 2: If the answer is yes, has it always been that way and my 
> > memory is just wrong, or is that something new in CSS3?
> 
> IIRC, there was something about tables not inheriting font-type back in 
> the day, but it does now.

Thanks, Adrienne (and everyone else who responded).

Periodically, someone announces that they are changing existing pages 
to HTML5 and CSS3, and someone else asks "why?"  I think for me the 
answer may be that it's an opportunity to simplify my stylings, and 
things are more likely to turn out as I wish because there are fewer 
special cases. And it's also an opportunity to revisit design 
decisions I made, and maybe make them better this time.

I suppose I could style * with font-family just as well as styling 
body with font-family, and to Jukka's point using * would avoid 
problems if browsers' default style sheets set fonts for particular 
elements (though I agree with him that it seems unlikely).

-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
11/5/2016 11:51:01 AM
On Thu, 3 Nov 2016 06:54:17 +0200, Osmo Saarikumpu wrote:
> 
> On 03/11/2016 04:09, Stan Brown wrote:
> > I'm taking an online HTML5/CSS3/Javascript course at Johns Hopkins,
> > and the instructor put things like font-size and color in his style
> > sheet as styles for the body element.
> 
> The question that interests me is: why is he setting font-size there at 
> all? IOW, why he want's to (most probably) change my default body text size?

It's a fair question. I'm not certain he actually did; maybe it was 
just color or font-family.

For what it's worth, I was horrified to see him setting paragraph 
widths in pixels, but he has since shifted to making them 
percentages. (But he showed relative and absolute positioning in 
pixels too, and that seems inappropriate to me.)

-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator:      http://validator.w3.org/
CSS 2.1 spec:   http://www.w3.org/TR/CSS21/
validator:      http://jigsaw.w3.org/css-validator/
Why We Won't Help You: http://preview.tinyurl.com/WhyWont
0
Stan
11/5/2016 12:05:03 PM
5.11.2016, 14:05, Stan Brown wrote:

> For what it's worth, I was horrified to see him setting paragraph
> widths in pixels, but he has since shifted to making them
> percentages.

That was not necessarily an improvement.

Typographic guidelines suggest text widths in characters. Typically 
55�60 characters is a suggested optimum, though according to some 
readability studied, a much narrower column is better. Somewhat wider 
text (say, up to 90 characters) is usually acceptable, if line height is 
sufficient.

Setting paragraph width in percentages is a shot in the dark. Suppose, 
for simplicity, that you have a very simple page structure, with text in 
one column, and you set body { width: 50% } to avoid making it far too 
wide on desktop computers in fullscreen mode. Well, the screen can 
actually be wider than you expected, so lines might get longer than 100 
characters. Or the screen or the window might be very narrow, resulting 
in, say, a ridiculous line length of about 20 characters when you could 
at least get 40.

Setting paragraph width is pixels is questionable on several grounds, 
but if you also set font size in pixels or points, you get at least 
somewhat predictable results, in terms of characters per line. So you 
can aim at the 60 characters width for example. It cannot be achieved 
exactly of course, since the widths of characters vary.

So usually it is best to set max-width on paragraphs, using ch or em 
units. You want to prevent too long lines, but you also want to use the 
available space when the window is narrow.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
11/6/2016 9:03:16 PM
On 05/11/2016 11:53, Jukka K. Korpela wrote:

> ... If you set font-family (and who doesn’t,
> these days?), do you accept the browser default for font-size...

It seems that last time I considered the issue, that's exactly what I 
did. I had to check to be sure, because it's been circa 10 years, since 
I made the choice. The idea being not to set the font size of body text, 
but to use the default size of the user's device, assuming that it is a 
size that the user can comfortably read, or that she has taken steps to 
modify it according to her needs.

> ... even though you know it will mostly look too large?

Most probably I dealt with the issue at the time by ditching Verdana and 
Arial in favor of Calibri. I can't really tell for sure, because I 
started to @import styles in order to hide them from Netscape 4 and 
unintentionally from the Wayback Machine at the same time :(

As an user, I have no recollection of ever diminishing any body text 
that I'm reading because it looks too large. But, as a designer, I do 
recollect diminishing the font size of pages in order to make them look 
'well-balanced' or something subjective like that.

Anyway, it seems that 'large' is the new black, as I'm encountering many 
sites that specify font size much larger than the shipped defaults. 
Activating reader mode actually diminishes the font size on many pages :)

-- 
Best wishes, Osmo
0
Osmo
11/12/2016 6:16:53 AM
On Sat, 12 Nov 2016 08:16:53 +0200, Osmo Saarikumpu wrote:
> 
> On 05/11/2016 11:53, Jukka K. Korpela wrote:
> 
> > ... If you set font-family (and who doesn?t,
> > these days?), do you accept the browser default for font-size...
> 
> It seems that last time I considered the issue, that's exactly what I 
> did. 

I still do.
 
> > ... even though you know it will mostly look too large?

I don't understand why it should (with the usual exception for fonts 
like Verdana, which I don't use).
 
> Most probably I dealt with the issue at the time by ditching Verdana and 
> Arial in favor of Calibri.

Is that generally available? I thought it was just a Windows font.

I wish caniuse.com covered fonts -- is here a reliable site that 
does?

-- 
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
                                       http://BrownMath.com/
                                  http://OakRoadSystems.com/
0
Stan
11/12/2016 2:02:41 PM
12.11.2016, 8:16, Osmo Saarikumpu wrote:

> Most probably I dealt with the issue at the time by ditching Verdana and
> Arial in favor of Calibri.

Calibri solves the issue that typical browser defaults for fonts are too 
large for most people when a sans-serif font is used. But it is a 
Microsoft font, available only on sufficiently new Windows systems (and 
on systems that have Calibri because of the installation of Microsoft 
software that contains Calibri). And I suppose we are not allowed to use 
it with @font-face.

> As an user, I have no recollection of ever diminishing any body text
> that I'm reading because it looks too large.

You’re so young. ☺ I’ve done that often – but perhaps mostly in the old 
days when many authors used <font size=4> for copy text or something 
similar.

But too large size is disturbing even when it does not disturb the user 
so much that he takes the effort of reducing font size (perhaps first 
trying to find out how to do that).

> Anyway, it seems that 'large' is the new black, as I'm encountering many
> sites that specify font size much larger than the shipped defaults.

Maybe. I haven’t encountered such issues to such an extent that I had 
become really aware of the issue.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
11/12/2016 2:32:39 PM
12.11.2016, 16:02, Stan Brown wrote:

>>> ... even though you know it will mostly look too large?
>
> I don't understand why it should (with the usual exception for fonts
> like Verdana, which I don't use).

If you compare Arial with, say, Times New Roman in the same font size, 
you�ll see how characters are much bigger in Arial. The difference is 
even bigger with Verdana, but 12pt Arial is simply too large to most 
people in most browsing situations.

It�s still readable, of course. But the overall look & feel of the page 
would differ from what we can regard as normal these days on the Web.

Consider http://www.w3.org for example. I�m not saying they�re doing 
everything right; I know they aren�t. Anyway, they use Arial (with the 
usual font-family string that gives priority to Helvetica, which is 
mostly identical with Arial and not installed on most systems). And they use

body { font-size:.82em; }

This is theoretically something between cluelessness and insult. It 
means saying �Dear (l)user, whatever you chose as the basic font size, I 
will make the size 18% smaller.� In practice, it�s not too bad. It means 
that if the user has done nothing with font size settings, as most users 
haven�t, he will get 0.82 � 12pt, which is about 10pt, which probably 
the best guess for font size when Arial is used and we have no special 
information about the user or the browsing environment.

> I wish caniuse.com covered fonts -- is here a reliable site that
> does?

There used to be codestyle.org, but it was discontinued. And it was 
based on uncontrolled user voting rather than sampling and critical 
studies, though it was much better than nothing.

However, the truth still is, as it always was, that there is not a 
single font that is installed in all, or even almost all, devices that 
people use to access web pages. A simple proof is that Android devices 
have their own fonts, which is not available on other platforms 
(although they, or very similar fonts, can be downloaded and installed 
by users, but few people do such things).

Using @font-face is the only way to have the same font used on almost 
all devices. It has its own drawbacks, but it seems to be the way to go, 
if you care about typographic style and uniformity. When you can be 
almost 100% sure that everyone sees the text in your preferred font, you 
can select line-height, column widths, and other parameters accordingly.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
11/12/2016 5:54:48 PM
On 12/11/2016 16:02, Stan Brown wrote:
> On Sat, 12 Nov 2016 08:16:53 +0200, Osmo Saarikumpu wrote:
>> Most probably I dealt with the issue at the time by ditching Verdana and
>> Arial in favor of Calibri.
>
> Is that generally available? I thought it was just a Windows font.

Well, a Microsoft font, but the font-family property allows specifying a 
prioritized list of alternatives.

> I wish caniuse.com covered fonts -- is here a reliable site that
> does?

Sort of, see:

https://www.smashingmagazine.com/2009/09/complete-guide-to-css-font-stacks/

Or, as Mr. Korpela pointed out, we may use Web fonts (@font-face), but I 
for one, won't probably see them as my favorite Firefox add-on NoScript 
blocks them too :)

-- 
Best wishes, Osmo
0
Osmo
11/13/2016 1:56:08 PM
On 12/11/2016 16:32, Jukka K. Korpela wrote:
> 12.11.2016, 8:16, Osmo Saarikumpu wrote:
>> Anyway, it seems that 'large' is the new black, as I'm encountering many
>> sites that specify font size much larger than the shipped defaults.
>
> Maybe. I haven’t encountered such issues to such an extent that I had
> become really aware of the issue.

Just earlier this week I stumbled upon two pages that exemplified the 
trend (if there is one):

https://themanual.org/read/issues/4/paul-ford/article

https://css-tricks.com/increasing-wariness-dogmatism/

I actually preferred the former one as it was, that is, I switched back 
from reader mode, and that does not happen often.

-- 
Best wishes, Osmo
0
Osmo
11/13/2016 2:20:33 PM
13.11.2016, 15:56, Osmo Saarikumpu wrote:

>> I wish caniuse.com covered fonts -- is here a reliable site that
>> does?
>
> Sort of, see:
>
> https://www.smashingmagazine.com/2009/09/complete-guide-to-css-font-stacks/

It’s from year 2009, and it doesn’t really describe what fonts work on 
which platforms. Rather, it shows font lists (or “font stacks”, as they 
are called for some odd reason) that are expected to cover different 
systems when used as font-family value, e.g.

Garamond, ‘Hoefler Text’, ‘Times New Roman’, Times, serif

(incorrectly using “smart quotes”).

For example, Garamond has rather different characteristics as opposite 
to Times New Roman (as an example screen shot on the page shows): it’s 
thinner and smaller. So a font size setting that is optimal for Garamond 
is suboptimal (though probably tolerable) for Times New Roman.

Unfortunately, CSS lacks even primitive programming tools, like “if 
Garamond is available, set font-size to ...”. There is no direct way to 
do such things in JavaScript either. And it’s not just font-size; it’s 
also line-height, column width, etc.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
0
Jukka
11/13/2016 5:12:46 PM
Reply: