Re: [css-d] why are ems rendering large?

[Crest Christopher]

Whoa, I haven't kept track of this question due to other projects and a 
new smart phone (too nice, might I add), and look at the replies.


Felix Miata wrote:

On 2014-07-26 21:40 (GMT-0400) Chris Rockwell composed:


... the original reason was to fix
some ie6/7 issues with em scaling.


Hence my language "in compliant browsers". :-)


Without looking further, there appear to be valid reasons for setting
font-size to 100% on body.


I can't think of any that make good sense as long as one needs not be 
concerned with antique browsers.



this is one of those practices that I see no harm in


It doesn't hurt any more than anything else that isn't necessary 
adding to overall page load size. It's anti-KISS. :-)

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Felix Miata]

On 2014-07-26 21:40 (GMT-0400) Chris Rockwell composed:


... the original reason was to fix
some ie6/7 issues with em scaling.


Hence my language "in compliant browsers". :-)


Without looking further, there appear to be valid reasons for setting
font-size to 100% on body.


I can't think of any that make good sense as long as one needs not be 
concerned with antique browsers.



this is one of those practices that I see no harm in


It doesn't hurt any more than anything else that isn't necessary adding to 
overall page load size. It's anti-KISS. :-)

--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris Rockwell]

Nevermind, its not in normalize.CSS, I scanned too quickly - sorry!
On Jul 26, 2014 9:40 PM, "Chris Rockwell"  wrote:

> Felix, admittedly I never questioned why setting font-size: 100% was a
> best practice, it's just always something I've done. Based on your response
> I did some quick research and, it appears, the original reason was to fix
> some ie6/7 issues with em scaling.
>
> Additionally, I checked normalize.CSS as I knew it was in there, you can
> see the reasoning they have also:
> https://github.com/h5bp/html5-boilerplate/blob/master/css/normalize.css
>
> Without looking further, there appear to be valid reasons for setting
> font-size to 100% on body.
>
> (Also admittedly, this is one of those practices that I see no harm in, so
> if someone smarter than me figured out it helps, I'll just take their word
> for it and include the few characters :))
>
> Chris
> On Jul 26, 2014 9:27 PM, "Felix Miata"  wrote:
>
>> On 2014-07-26 19:43 (GMT-0500) Karl DeSaulniers composed:
>>
>>  Felix Miata wrote:

>>>
>>  ...CSS for the public web should never size text in px. Sizing text in
 px means the optimal base size determined by each user, as embodied in
 his browser default size, is totally disregarded, tyrannically usurped
 if you will, which is rude.

>>>
>>  Hmm looks like you're rightSo use ems as the body font size and %
>>> elsewhere.
>>>
>>
>> 1-WRT text size, there's no effective difference between using em and %.
>> The only difference in compliant browsers WRT text size is CSS syntax, what
>> follows the last numeral, and where the period belongs. Where the meaning
>> of em and % differs is WRT sizes of objects other than text, e.g.
>> containers and images.
>>
>> 2-Why set a size on the body at all? When you do that, you're in effect
>> telling every user that his determination of optimal size is wrong. You
>> can't know any such thing. You don't have his eyes. You can't see his
>> screen. What you're doing changing the base size in em or % is usually
>> different from using px mostly in degree, but the very same thing in
>> overall concept - disrespect (usually, but not necessarily, e.g. if going
>> bigger in order to be emphatic) for the user.
>>
>> Leaving font size out of body (and html) you're embracing the user's
>> advance determination what an optimal base size is - he gets his preferred
>> size as the base, and presumably, dominant size of page text, ideal for
>> paragraphs and/or whatever other text makes up the majority of content.
>> Explicit sizing of text should be reserved for text that has good reason to
>> differ in size from the base size, things like headings, footnotes,
>> superscripts, footer text and such. The bonus for you as stylist, is your
>> CSS can be much simpler, and thus easier to build and maintain.
>> --
>> "The wise are known for their understanding, and pleasant
>> words are persuasive." Proverbs 16:21 (New Living Translation)
>>
>>  Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!
>>
>> Felix Miata  ***  http://fm.no-ip.com/
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris Rockwell]

Felix, admittedly I never questioned why setting font-size: 100% was a best
practice, it's just always something I've done. Based on your response I
did some quick research and, it appears, the original reason was to fix
some ie6/7 issues with em scaling.

Additionally, I checked normalize.CSS as I knew it was in there, you can
see the reasoning they have also:
https://github.com/h5bp/html5-boilerplate/blob/master/css/normalize.css

Without looking further, there appear to be valid reasons for setting
font-size to 100% on body.

(Also admittedly, this is one of those practices that I see no harm in, so
if someone smarter than me figured out it helps, I'll just take their word
for it and include the few characters :))

Chris
On Jul 26, 2014 9:27 PM, "Felix Miata"  wrote:

> On 2014-07-26 19:43 (GMT-0500) Karl DeSaulniers composed:
>
>  Felix Miata wrote:
>>>
>>
>  ...CSS for the public web should never size text in px. Sizing text in
>>> px means the optimal base size determined by each user, as embodied in
>>> his browser default size, is totally disregarded, tyrannically usurped
>>> if you will, which is rude.
>>>
>>
>  Hmm looks like you're rightSo use ems as the body font size and %
>> elsewhere.
>>
>
> 1-WRT text size, there's no effective difference between using em and %.
> The only difference in compliant browsers WRT text size is CSS syntax, what
> follows the last numeral, and where the period belongs. Where the meaning
> of em and % differs is WRT sizes of objects other than text, e.g.
> containers and images.
>
> 2-Why set a size on the body at all? When you do that, you're in effect
> telling every user that his determination of optimal size is wrong. You
> can't know any such thing. You don't have his eyes. You can't see his
> screen. What you're doing changing the base size in em or % is usually
> different from using px mostly in degree, but the very same thing in
> overall concept - disrespect (usually, but not necessarily, e.g. if going
> bigger in order to be emphatic) for the user.
>
> Leaving font size out of body (and html) you're embracing the user's
> advance determination what an optimal base size is - he gets his preferred
> size as the base, and presumably, dominant size of page text, ideal for
> paragraphs and/or whatever other text makes up the majority of content.
> Explicit sizing of text should be reserved for text that has good reason to
> differ in size from the base size, things like headings, footnotes,
> superscripts, footer text and such. The bonus for you as stylist, is your
> CSS can be much simpler, and thus easier to build and maintain.
> --
> "The wise are known for their understanding, and pleasant
> words are persuasive." Proverbs 16:21 (New Living Translation)
>
>  Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!
>
> Felix Miata  ***  http://fm.no-ip.com/
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Felix Miata]

On 2014-07-26 19:43 (GMT-0500) Karl DeSaulniers composed:


Felix Miata wrote:



...CSS for the public web should never size text in px. Sizing text in
px means the optimal base size determined by each user, as embodied in
his browser default size, is totally disregarded, tyrannically usurped
if you will, which is rude.



Hmm looks like you're rightSo use ems as the body font size and %
elsewhere.


1-WRT text size, there's no effective difference between using em and %. The 
only difference in compliant browsers WRT text size is CSS syntax, what 
follows the last numeral, and where the period belongs. Where the meaning of 
em and % differs is WRT sizes of objects other than text, e.g. containers and 
images.


2-Why set a size on the body at all? When you do that, you're in effect 
telling every user that his determination of optimal size is wrong. You can't 
know any such thing. You don't have his eyes. You can't see his screen. What 
you're doing changing the base size in em or % is usually different from 
using px mostly in degree, but the very same thing in overall concept - 
disrespect (usually, but not necessarily, e.g. if going bigger in order to be 
emphatic) for the user.


Leaving font size out of body (and html) you're embracing the user's advance 
determination what an optimal base size is - he gets his preferred size as 
the base, and presumably, dominant size of page text, ideal for paragraphs 
and/or whatever other text makes up the majority of content. Explicit sizing 
of text should be reserved for text that has good reason to differ in size 
from the base size, things like headings, footnotes, superscripts, footer 
text and such. The bonus for you as stylist, is your CSS can be much simpler, 
and thus easier to build and maintain.

--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Saturday, July 26, 2014, Karl DeSaulniers  wrote:

>
>
> Sent from losPhone
>
> > On Jul 26, 2014, at 6:57 PM, Felix Miata  > wrote:
> >
> > On 2014-07-26 18:29 (GMT-0400) Karl DeSaulniers composed:
> >
> >> I usually go px on the body and % everywhere else.
> >
> > Why does px on body seems like a good idea for users?
> >
>  It's actually a method I learned online...
> >
> > As is often the case where a page is trying to make it easy for
> stylists, which in this paradigm translates to hard on users.
> >
> >>> Screen readers care about font size ?
> >
> >> No users do.
> >
> > That's precisely why CSS for the public web should never size text in
> px. Sizing text in px means the optimal base size determined by each user,
> as embodied in his browser default size, is totally disregarded,
> tyrannically usurped if you will, which is rude.
> > --
>
> Hmm looks like you're right. I was worried about screen readers zooming
> not users setting the browser font. So use ems as the body font size and %
> elsewhere. I just tried switching the base font in Firefox and it did what
> you said and didn't let me. So I'd agree now that px as a base font may not
> be ideal. I tried em as the body font-size and % else where and it still
> worked like I wanted and let me set the optimal font in Firefox. So I will
> be switching to ems as the body font-size. Thanks all.
>
>
I set body to 100%. Size elements - minimally - with rems.




-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

Sent from losPhone

> On Jul 26, 2014, at 6:57 PM, Felix Miata  wrote:
> 
> On 2014-07-26 18:29 (GMT-0400) Karl DeSaulniers composed:
> 
>> I usually go px on the body and % everywhere else.
> 
> Why does px on body seems like a good idea for users?
> 
 It's actually a method I learned online...
> 
> As is often the case where a page is trying to make it easy for stylists, 
> which in this paradigm translates to hard on users.
> 
>>> Screen readers care about font size ?
> 
>> No users do.
> 
> That's precisely why CSS for the public web should never size text in px. 
> Sizing text in px means the optimal base size determined by each user, as 
> embodied in his browser default size, is totally disregarded, tyrannically 
> usurped if you will, which is rude.
> -- 

Hmm looks like you're right. I was worried about screen readers zooming not 
users setting the browser font. So use ems as the body font size and % 
elsewhere. I just tried switching the base font in Firefox and it did what you 
said and didn't let me. So I'd agree now that px as a base font may not be 
ideal. I tried em as the body font-size and % else where and it still worked 
like I wanted and let me set the optimal font in Firefox. So I will be 
switching to ems as the body font-size. Thanks all. 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Felix Miata]

On 2014-07-26 18:29 (GMT-0400) Karl DeSaulniers composed:


I usually go px on the body and % everywhere else.



Why does px on body seems like a good idea for users?



It's actually a method I learned online...


As is often the case where a page is trying to make it easy for stylists, 
which in this paradigm translates to hard on users.



Screen readers care about font size ?



No users do.


That's precisely why CSS for the public web should never size text in px. 
Sizing text in px means the optimal base size determined by each user, as 
embodied in his browser default size, is totally disregarded, tyrannically 
usurped if you will, which is rude.

--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

Sent from losPhone

> On Jul 26, 2014, at 4:59 PM, Tom Livingston  wrote:
> 
>> On Saturday, July 26, 2014, Karl DeSaulniers  wrote:
>> 
>> 
>> 
>> Sent from losPhone
>> 
 On Jul 26, 2014, at 8:34 AM, MiB >> > wrote:
>>> 
>>> 
>>> jul 26 2014 01:24 Karl DeSaulniers 
>>> :
>>> 
 I usually go px on the body and % everywhere else.
>>> 
>>> Why does px on body seems like a good idea for users?
>> 
>> It's actually a method I learned online, but I believe the premise was,
>> screen readers usually size in px and they set the body font. So setting
>> the body to px and using %, ems or rems elsewhere made it easier to control
>> the fonts on a page. By no means am I saying this is the only way, just the
>> way I do it. Works like a charm so far. :)
>> 
>> Best,
>> Karl
> 
> Screen readers care about font size ?
> 

No users do. 

Karl
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Saturday, July 26, 2014, Karl DeSaulniers  wrote:

>
>
> Sent from losPhone
>
> > On Jul 26, 2014, at 8:34 AM, MiB  > wrote:
> >
> >
> > jul 26 2014 01:24 Karl DeSaulniers 
> >:
> >
> >> I usually go px on the body and % everywhere else.
> >
> > Why does px on body seems like a good idea for users?
> >
>
> It's actually a method I learned online, but I believe the premise was,
> screen readers usually size in px and they set the body font. So setting
> the body to px and using %, ems or rems elsewhere made it easier to control
> the fonts on a page. By no means am I saying this is the only way, just the
> way I do it. Works like a charm so far. :)
>
> Best,
> Karl
>
>

Screen readers care about font size ?


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

Sent from losPhone

> On Jul 26, 2014, at 8:34 AM, MiB  wrote:
> 
> 
> jul 26 2014 01:24 Karl DeSaulniers :
> 
>> I usually go px on the body and % everywhere else.
> 
> Why does px on body seems like a good idea for users?
> 

It's actually a method I learned online, but I believe the premise was, screen 
readers usually size in px and they set the body font. So setting the body to 
px and using %, ems or rems elsewhere made it easier to control the fonts on a 
page. By no means am I saying this is the only way, just the way I do it. Works 
like a charm so far. :)

Best,
Karl
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[MiB]

jul 26 2014 01:24 Karl DeSaulniers :

> I usually go px on the body and % everywhere else.

Why does px on body seems like a good idea for users?
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

I usually go px on the body and % everywhere else. Then when doing media 
queries, most the time all I have to adjust is the body px size and everything 
else sizes with it correctly. There is always some that are a little off, so 
then I go an adjust the % for just that one element for just that media query. 

Karl

Sent from losPhone

> On Jul 25, 2014, at 4:44 PM, Eric  wrote:
> 
> Yep this is what I have done for a long time.
> 
> The support for the REM unit is now pretty much universal in modern UAs, 
> except
> for bugs (one of which I found and reported on pre-IE11). And, in that case 
> the
> REM unit was only being ignored for font-size.
> 
> If you have to support ancient UAs than use a fixed value fallback or an EM if
> you don't mind the hassle that imposes. But, of course that raises the 
> question
> why support ancient UAs when their usage is so low these days? :-)
> 
> 
>> On July 25, 2014 at 7:39 AM Tom Livingston  wrote:
>> 
>> 
>> Lack of rem support is easily taken care of with a fallback declaration
>> using px:
>> 
>> Font-size:16px;
>> Font-size:1rem;
>> 
>> This allows MOST browsers to use a relative font unit - honoring a users
>> preference for font size - without the compounding issues (and any
>> other) of the em.
>> 
>> 
>> 
>> --
>> 
>> Tom Livingston | Senior Front-End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Eric]

Yep this is what I have done for a long time.

The support for the REM unit is now pretty much universal in modern UAs, except
for bugs (one of which I found and reported on pre-IE11). And, in that case the
REM unit was only being ignored for font-size.

If you have to support ancient UAs than use a fixed value fallback or an EM if
you don't mind the hassle that imposes. But, of course that raises the question
why support ancient UAs when their usage is so low these days? :-)


> On July 25, 2014 at 7:39 AM Tom Livingston  wrote:
>
>
> Lack of rem support is easily taken care of with a fallback declaration
> using px:
>
> Font-size:16px;
> Font-size:1rem;
>
> This allows MOST browsers to use a relative font unit - honoring a users
> preference for font size - without the compounding issues (and any
> other) of the em.
>
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Richard Wendrock Forum]

This is a handle chart.
http://jerekdain.com/fontconversion.html


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Crest Christopher
Sent: Thursday, July 24, 2014 9:53 PM
To: Tom Livingston
Cc: Chris F.A. Johnson; CSS-Discuss; John
Subject: Re: [css-d] why are ems rendering large?

A font-size of 120% is 19px, is my math correct ?

Tom Livingston wrote:
> I don't know about golden, but it equal to the browser default which, 
> if unchanged, is usually 16px.
>
>
>
> On Thursday, July 24, 2014, Crest Christopher 
> mailto:crestchristop...@gmail.com>> wrote:
>
> Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920
> px or rounded down as mentioned 19px, correct ?
>
> Tom Livingston wrote:
>> On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher
>> 
  wrote:
>>> Now you confused me ?
>>>
>>>
>> ems are relative to font size.
>>
>> Given a browser default of 16px, 1em = 16px.
>>
>> If you have something set at font-size: 120%;, that's 120% bigger
than
>> 16px (1em) so, like Chris said, it would be 19px (rounded down) or
>> 1.188em;
>>
>>
>
>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com <http://mlinc.com>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Fri, Jul 25, 2014 at 2:27 PM, Chris F.A. Johnson
 wrote:
> On Fri, 25 Jul 2014, Tom Livingston wrote:
>
>> Lack of rem support is easily taken care of with a fallback declaration
>> using px:
>>
>> Font-size:16px;
>> Font-size:1rem;
>
>
>Better still, using em or %:
>
> font-size: 100%;
> font-size: 1rem;
>
>
>> This allows MOST browsers to use a relative font unit - honoring a users
>> preference for font size - without the compounding issues (and any
>> other) of the em.
>
>

Why use rem at all if you are going to fall back to em? You are
probably going to have to do a lot of extra coding to overcome any
issues that arise should the fallback ems come into play. If you code
and structure your pages without worrying about compounding issues
etc, and then the ems kick in on a browser that doesn't support rems,
you're most likely going to have more issues to overcome than if you
fall back to pixels.



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris F.A. Johnson]

On Fri, 25 Jul 2014, Tom Livingston wrote:


Lack of rem support is easily taken care of with a fallback declaration
using px:

Font-size:16px;
Font-size:1rem;


   Better still, using em or %:

font-size: 100%;
font-size: 1rem;


This allows MOST browsers to use a relative font unit - honoring a users
preference for font size - without the compounding issues (and any
other) of the em.



--
Chris F.A. Johnson, 
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

Lack of rem support is easily taken care of with a fallback declaration
using px:

Font-size:16px;
Font-size:1rem;

This allows MOST browsers to use a relative font unit - honoring a users
preference for font size - without the compounding issues (and any
other) of the em.



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

On Jul 25, 2014, at 6:24 AM, Philippe Wittenbergh  wrote:

> 
> Le 25 juil. 2014 à 20:06, Karl DeSaulniers  a écrit :
> 
>> Just made reference real quick to rems being the one based on the body only.
> 
> No.
> rems are not – repeat not – based on the font-size on body! They are based on 
> the font-size of the root element, as I note earlier in this thread. The root 
> element in your html document is .
> 
> Try this:
> 
> 
> body { font-size: .8em; }
> p.a { font-size: 1em; color: red; }
> p.b { font-size: 1rem; color: blue; }
> 
> 
>  test - font-size: 1em specified
>  test - font-size: 1rem specified
> 
> Philippe
> --
> Philippe Wittenbergh

Correct. I should have said root.

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Philippe Wittenbergh]

Le 25 juil. 2014 à 20:06, Karl DeSaulniers  a écrit :

> Just made reference real quick to rems being the one based on the body only.

No.
rems are not – repeat not – based on the font-size on body! They are based on 
the font-size of the root element, as I note earlier in this thread. The root 
element in your html document is .

Try this:


body { font-size: .8em; }
p.a { font-size: 1em; color: red; }
p.b { font-size: 1rem; color: blue; }


 test - font-size: 1em specified
 test - font-size: 1rem specified

Philippe
--
Philippe Wittenbergh
http://l-c-n.com




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

On Jul 25, 2014, at 6:02 AM, "Mike & Martha"  wrote:

> 
> 
> -- Original Message --
> From: "Karl DeSaulniers" 
> To: "CSS-Discuss Discuss" 
> Sent: 7/25/2014 4:59:48 AM
> Subject: Re: [css-d] why are ems rendering large?
> 
>> Actually, I believe ems are based on the prior font-size of the element in 
>> which its contained. rems are based on body.
>> For example, If you have a div in the body with no font-size set and a span 
>> inside that div with font-size set to 120% then it will be 120% of the body 
>> font-size.
>> However, if the div has a font-size of 110%, then the span would have a 
>> font-size that is 120% of 110% the divs calculated font-size would be of the 
>> body font-size.
>> Stay with me.. :)
>> 
>> Example 1:
>> > >  > 
>> Example2:
>> > >  > 
>> Please someone correct me if I am wrong.
> Well, your math is correct, but it shows that the calculated font size is 
> based on the span's parent font size which is the div.
> 
> Now if you had used a rem in your calculation this wouldn't have occurred 
> because the font size would have been base on the Root font size; that's the 
> definition of rem, a root-based em.
> 
> That's beauty of using rems, they are stable in that they're based on the 
> root font-size, but they are dynamic and relate to size changes of objects 
> and screens.
> 
> /* Example3: */
> body {
>font-size: 16px;
> }
>/* (1.2 * 16px)   = 19.2 px  */
> Michael Rose
> 


My apologies, I was speaking about ems.
Just made reference real quick to rems being the one based on the body only.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Mike & Martha]

-- Original Message --
From: "Karl DeSaulniers" 
To: "CSS-Discuss Discuss" 
Sent: 7/25/2014 4:59:48 AM
Subject: Re: [css-d] why are ems rendering large?

Actually, I believe ems are based on the prior font-size of the element 
in which its contained. rems are based on body.
For example, If you have a div in the body with no font-size set and a 
span inside that div with font-size set to 120% then it will be 120% of 
the body font-size.
However, if the div has a font-size of 110%, then the span would have a 
font-size that is 120% of 110% the divs calculated font-size would be 
of the body font-size.

Stay with me.. :)

Example 1:
Well, your math is correct, but it shows that the calculated font size 
is based on the span's parent font size which is the div.


Now if you had used a rem in your calculation this wouldn't have 
occurred because the font size would have been base on the Root font 
size; that's the definition of rem, a root-based em.


That's beauty of using rems, they are stable in that they're based on 
the root font-size, but they are dynamic and relate to size changes of 
objects and screens.


/* Example3: */
body {
font-size: 16px;
}
   /* (1.2 * 16px)   = 19.2 px  
*/

Michael Rose


HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com
__







__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Karl DeSaulniers]

Actually, I believe ems are based on the prior font-size of the element in 
which its contained. rems are based on body.
For example, If you have a div in the body with no font-size set and a span 
inside that div with font-size set to 120% then it will be 120% of the body 
font-size.
However, if the div has a font-size of 110%, then the span would have a 
font-size that is 120% of 110% the divs calculated font-size would be of the 
body font-size.
Stay with me.. :)

Example 1:
http://designdrumm.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Jukka K. Korpela]

2014-07-25 9:06, John wrote:


Is there a way to tell the browser…*any* browser: 1em = 16px and that’s that?


No.


Or is

body
{
font-size:100%;
}

—with the underlying hope and assumption that 100% is understood to mean 16px 
and from there the leap that 1em equals the 16pixels — all we have in that 
toolkit?


100% means, when used as the value of the font-size property, exactly 
the font size of the parent element. Nothing more, nothing less.


If you so intensely want to have 1em equal 16px no matter what, why are 
you using the em unit at all? To keep the numeric values smaller? But 
for that, you can use the pc (pica) unit, since, according to the 
definitions in modern CSS, 1pc = 12pt = 16px, as an identity.


Yucca


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris F.A. Johnson]

On Thu, 24 Jul 2014, John wrote:


Is there a way to tell the browser…*any* browser: 1em = 16px and that’s that?

Or is

body
{
font-size:100%;
}

—with the underlying hope and assumption that 100% is understood to
mean 16px and from there the leap that 1em equals the 16pixels — all
we have in that toolkit?


   Why would you want it to necessarily be 16px? It it were, it would
   be too small for many people to read comfortably.

   In my browser, "font-size:100%;" means 22px, a good size for me to
   read easily.

--
Chris F.A. Johnson, __
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Felix Miata]

On 2014-07-25 08:15 (GMT+0300) Jukka K. Korpela composed:


The downside of the rem is...


While everything you wrote is or at least appears to be true, it entirely 
misses the higher level point I was trying to make, which was to put forth in 
simplistic terms the idea that thinking in px is best replaced by thinking in 
any of the available units that embody more granular precision, that are:


1-tailored to the pleasure and ease of the user, and
2-easier for the stylist, once he *abandons* the idea that the web is a place 
where high precision has any business being a priority


Web browsers do a nice job of presenting semantically correct HTML without 
help from CSS. They're naturally responsive too.


CSS offers a high degree of power to overcome a browser's ability to do what 
it is designed to do, to limit fluidity and flexibility. CSS ought to be used 
judiciously to enhance the semantic order, and give it character and color 
consistent with the nature of the page or site and/or its owner, not fixate 
everything to one person's or one team's idea of some kind of perfection in 
both relative terms, and the more troubling for users, absolute terms. 
Relative on average ought to be close enough.


The web ain't paper. Viewports come in an unlimited range of physical sizes, 
and nearly as broad a variety of aspect ratios. Viewing distance is another 
significant variable. One size cannot fit all. That makes the px unit a poor 
choice for design sizing focus, particularly since it also has no predictable 
relationship to any physical size that corresponds favorably with comfort, 
ease of use, or pleasure.


Most of the web has become a morass of URIs where CSS often outweighs HTML in 
multiples of 2 or 3 or even more, where a minor styling adjustment for one 
minor class creates unforeseen impacts elsewhere that take hours or days to 
debug, if the negative impact(s) ever gets discovered at all, and where a 
large site style overhaul can be a months long process that ultimately can 
stretch to more than a year. That puts the cart in front of the horse, not to 
mention gobbling bandwidth that's going to become more precious as time 
marches on and user numbers continue to mushroom.


Remember, a browser is a user agent. It's a tool that ought to be able to 
please the user, and do it with as little effort as possible. When pieces are 
bigger, fewer pieces are needed, resulting in easier construction. The more 
simplistic and efficient the CSS, the better a browser can do its job, and 
the lower the burden on the information highway. IOW, to the extent feasible 
fitting with the goal of a page/site, the simpler, the better.


Simple as thinking in px might appear to be to some, or even most, 
considering the macro issues above, now that lack of browser support for rem, 
ch and other newer relative units is near extinction, it is no longer, if it 
ever was. IMO, it isn't, and never was.

--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Philippe Wittenbergh]

Le 25 juil. 2014 à 15:06, John  a écrit :

> Is there a way to tell the browser…*any* browser: 1em = 16px and that’s that?
> 
> Or is
> 
> body
> {
>   font-size:100%;
> }
> 
> —with the underlying hope and assumption that 100% is understood to mean 16px 
> and from there the leap that 1em equals the 16pixels — all we have in that 
> toolkit?

You could conceivably force the assumption that the base font-size is 16px:
html { font-size: 16px; }

Then 1em = 16px, until you write something like

p { font-size: .85em; padding: 1em; }

Your 'em' (padding) in that case will definitively *not* be equal to 16px ………

Forget about that equation of 1em = 16px; it is useless. Think differently, in  
terms of proportions, as in “I want the padding around that block of text to be 
twice the font-size”, or I “want that headline to be twice as big as my body 
text” and don’t spend time translating that into something that *might* result 
in being equal to 32px or whatever.

Philippe
--
Philippe Wittenbergh
http://l-c-n.com




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[John]

Is there a way to tell the browser…*any* browser: 1em = 16px and that’s that?

Or is

body
{
font-size:100%;
}

—with the underlying hope and assumption that 100% is understood to mean 16px 
and from there the leap that 1em equals the 16pixels — all we have in that 
toolkit?

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Jukka K. Korpela]

2014-07-25 6:50, Felix Miata wrote:


OTOH, the em unit at the document root, where it's equal to 1rem, is
also equal to the user's definition of optimal text size, as reflected
by the browser's default size setting.


The downside of the rem is lack of support in some old browsers. We need 
to weigh this against the possible convenience of avoiding some 
multiplications, which may be needed when using the em unit, if nested 
elements have different font sizes.



Instead of saying to yourself "this is how wide I want, so
that I can fit this many words or letters on a line" or "one word's
worth of whitespace", then figuring out how many px it takes to get that
width, you can instead use an em/rem to get however many you want
(almost) directly (since in width you get about 2 characters' width out
of one em).


Typographers traditionally use the em concept in spacing, though they 
also use points and other physical measures. The point is that even 
though print typography sets texts in fixed font sizes, the em unit is 
still found useful, since it relates to relative spacing rather than 
some coincidental value in points.


But I'm afraid the correspondence 1 em = 2 characters is too coarse. The 
width of a character depends on the font and on the character, and for 
typical texts in Latin letters in typical fonts, the "average" width of 
a character (a very vague concept) tends to be 0.4em or less rather than 
0.5em.



If you want paragraphs to be 60 characters of optimal size
wide, then it can be as simple as 60 / 2 == 30em!


I'm afraid that's too simple. Setting width to 30em tends to make it 
considerably larger than 60 characters. I would rather suggest


width: 25em;
width: 60ch;

The latter sets the width using the ch unit, which means the advance 
width of the digit zero '0'. I practice, it is the best approximation to 
the vague concept "average width of a character" (for texts dominantly 
in mixed-case Latin letters) that we have. Due to lack of support in 
older browsers, the setting is best preceded by a "fallback" setting 
that uses the em unit.



If you want a code
block to be 12 lines tall, it could be as simple as 'code {height: 12em}'!


There are two issues with that. First, the  element is an inline 
element by default, so that the height property does not apply to it. If 
you use more logical and more practical markup for a code block, such as 
..., you would set height on the 
outer, block-level container.


Second, setting height: 12em produces a 12 lines tall block only when 
text is set solid, i.e. line-height: 1, which is not the default and in 
most cases not a suitable setting. Normally, it is better to explicitly 
set line-height (to avoid consequences of varying browser defaults) and 
make the height an integer multiple of that value. E.g.,


.codeblock { line-height: 1.2; height: 14.4em }

where 14.4 comes from 12 × 1.2.

Yucca


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Felix Miata]

On 2014-07-24 22:47 (GMT-0400) Crest Christopher composed:


Is this a golden rule, 1em = 16px ?


Per happenstance, 16px is the most commonly shipped default. In some 
browsers, the default is actually 12pt, but because the display density a 
genuine traditional pt depends upon assumes a density of 96 DPI, 12pt 
translates to 16px. This 3:4 relationship is written into CSS3 as the 
definition of a pt, unlike in previous CSS versions, where a pt had the same 
meaning as in the rest of the universe.


Still, not every browser has always shipped with 16px whether directly or 
indirectly.


Furthermore, the browser default is one of those things that makes a personal 
computer personal - it can be personalized, the object being that it is only 
the user who is in position to make a determination what size is optimal. It 
only makes sense that the optimal size and the default size are made equal. 
Anyone who assumes that is not the case is taking a tyrannical view of web 
styling, styling for the stylist and/or whoever pays him rather the much 
larger multitudes who deign to use his work.



 If the math is 120 * 16 = 1920 px or
rounded down as mentioned 19px, correct ?


It bothers me that you seem to be having such a hard time with any 
mathematical relationship, because it seems you're focusing on px, which 
should be the job of the browser. Browsers are naturally good at math. They 
may not all round exactly the same, but they always get math right. 1.2 X 16 
is always 19.2, just as 120% of 16 is always 19.2, just as 1.2rem is always 
19.2px - if the initial value of the root element is in fact 16px.


OTOH, the em unit at the document root, where it's equal to 1rem, is also 
equal to the user's definition of optimal text size, as reflected by the 
browser's default size setting. If you focus on the rem, and use fractions 
and multiples thereof in same manner as you would a px, regardless what the 
browser's default size setting is, the browser can do the math to convert to 
px. The bonus is whatever default size works best for you in your own browser 
can work equally well for the user's browser, whatever its default size has 
been personalized to be, including for the majority of users the shipped from 
vendor size.


When you think in em/rem instead thinking in px, the math can be very much 
simpler. Instead of saying to yourself "this is how wide I want, so that I 
can fit this many words or letters on a line" or "one word's worth of 
whitespace", then figuring out how many px it takes to get that width, you 
can instead use an em/rem to get however many you want (almost) directly 
(since in width you get about 2 characters' width out of one em). If you want 
paragraphs to be 60 characters of optimal size wide, then it can be as simple 
as 60 / 2 == 30em! If you want a code block to be 12 lines tall, it could be 
as simple as 'code {height: 12em}'!

--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[David Hucklesby]

On 7/24/14, 19:53, Tom Livingston wrote:

I believe so.

On Thursday, July 24, 2014, Crest Christopher 
wrote:


A font-size of 120% is 19px, is my math correct ?

Tom Livingston wrote:

I don't know about golden, but it equal to the browser default which, if
unchanged, is usually 16px.



On Thursday, July 24, 2014, Crest Christopher > wrote:


Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920 px or
rounded down as mentioned 19px, correct ?


Usually 16px - but certainly not always. Don’t forget to test your design with
different text sizes. Most browsers let you change the default size somewhere
in the settings.

--
Cordially,
David


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

I believe so.

On Thursday, July 24, 2014, Crest Christopher 
wrote:

> A font-size of 120% is 19px, is my math correct ?
>
> Tom Livingston wrote:
>
> I don't know about golden, but it equal to the browser default which, if
> unchanged, is usually 16px.
>
>
>
> On Thursday, July 24, 2014, Crest Christopher  > wrote:
>
>> Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920 px or
>> rounded down as mentioned 19px, correct ?
>>
>> Tom Livingston wrote:
>>
>> On Thu, Jul 24, 2014 at 9:40 AM, Crest 
>> Christopher wrote:
>>
>> Now you confused me ?
>>
>>
>>
>> ems are relative to font size.
>>
>> Given a browser default of 16px, 1em = 16px.
>>
>> If you have something set at font-size: 120%;, that's 120% bigger than
>> 16px (1em) so, like Chris said, it would be 19px (rounded down) or
>> 1.188em;
>>
>>
>>
>>
>
> --
>
> Tom Livingston | Senior Front-End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
>
>

-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Crest Christopher]

A font-size of 120% is 19px, is my math correct ?

Tom Livingston wrote:
I don't know about golden, but it equal to the browser default which, 
if unchanged, is usually 16px.




On Thursday, July 24, 2014, Crest Christopher 
mailto:crestchristop...@gmail.com>> wrote:


Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920
px or rounded down as mentioned 19px, correct ?

Tom Livingston wrote:

On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher
  
  wrote:

Now you confused me ?



ems are relative to font size.

Given a browser default of 16px, 1em = 16px.

If you have something set at font-size: 120%;, that's 120% bigger than
16px (1em) so, like Chris said, it would be 19px (rounded down) or
1.188em;






--

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

I don't know about golden, but it equal to the browser default which, if
unchanged, is usually 16px.



On Thursday, July 24, 2014, Crest Christopher 
wrote:

> Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920 px or
> rounded down as mentioned 19px, correct ?
>
> Tom Livingston wrote:
>
> On Thu, Jul 24, 2014 at 9:40 AM, Crest 
> Christopher 
>  wrote:
>
> Now you confused me ?
>
>
>
>
> ems are relative to font size.
>
> Given a browser default of 16px, 1em = 16px.
>
> If you have something set at font-size: 120%;, that's 120% bigger than
> 16px (1em) so, like Chris said, it would be 19px (rounded down) or
> 1.188em;
>
>
>
>

-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Crest Christopher]

Is this a golden rule, 1em = 16px ? If the math is 120 * 16 = 1920 px or 
rounded down as mentioned 19px, correct ?


Tom Livingston wrote:

On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher
  wrote:

Now you confused me ?





ems are relative to font size.

Given a browser default of 16px, 1em = 16px.

If you have something set at font-size: 120%;, that's 120% bigger than
16px (1em) so, like Chris said, it would be 19px (rounded down) or
1.188em;



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Philippe Wittenbergh]

Le 25 juil. 2014 à 01:06, Chris F.A. Johnson  a écrit :

> Note that you can also specify font-size in rem, which is relative
>  to the BODY's font-size. See .

Ahem, Chris:

> rem unit
> Equal to the computed value of font-size on the ***root element***. 
> When specified on the font-size property of the root element, the rem units 
> refer to the property’s initial value.

(my emphasis)

http://dev.w3.org/csswg/css-values/#font-relative-lengths

Philippe
--
Philippe Wittenbergh
http://l-c-n.com




__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Felix Miata]

On 2014-07-24 08:45 (GMT-0700) John composed:


So, I either have to keep track of the math, or…is there another, better way I 
should have built that lock-up?


If you are not in need to support ancient browsers, there is an easy way: 
instead of 1.25em, use 1.25rem, which matches your expectation as reflected 
in your initial thread posts.

http://www.w3.org/TR/css3-values/#rem-unit
--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

 Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Thu, Jul 24, 2014 at 12:52 PM, John  wrote:
>
> On Jul 24, 2014, at 9:49 AM, Tom Livingston  wrote:
>
>> You could, since that h1 is an image, spec it to be font-size: 1em; but I 
>> tend to agree text trumps alt text.
>
> OK..so for the css declaration, it could be:
>
> #logo h1{
> font-size:1em;
> color:black;
> blah;
> blah;
> blah;
> }
>
> which could come in very handy in future, but I suspect I also need to get 
> comfy with the REM idea as well..
>
> J



I used rem on this site: htp://www.mlmic.com with a px font-size fallback, like:

p{font-size:14px; font-size: .9rem;}



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[John]

On Jul 24, 2014, at 9:49 AM, Tom Livingston  wrote:

> You could, since that h1 is an image, spec it to be font-size: 1em; but I 
> tend to agree text trumps alt text.

OK..so for the css declaration, it could be:

#logo h1{
font-size:1em;
color:black;
blah;
blah;
blah;
}

which could come in very handy in future, but I suspect I also need to get 
comfy with the REM idea as well..

J
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Thu, Jul 24, 2014 at 12:00 PM, John  wrote:
> On Jul 24, 2014, at 8:53 AM, Tom Livingston  wrote:
>> Not really. You are currently making that the highest level head
>> element (h1) of the page. Is that what you want?
>
> Not if the h1-wrapped element is a graphic whose only text opportunity is the 
> alt tag.  if that logo were live type, then yes.
>

I would think, as far as the page outline goes, your h1 is the highest
level head element of your page regardless of what's in it. No?



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris Rockwell]

>
>
> Right on…the hide me from view method is one I was encouraged to explore;
> have not yet done so.
>

Take a look at
https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css#L110
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[John]

On Jul 24, 2014, at 9:01 AM, Chris Rockwell  wrote:

> If you want to use em's, you'll need to be aware of parent font sizes.
> Personally, I don't put 's in 's, but I see it in practice all of
> the time (and it's acceptable as far as the standards bodies are
> concerned).
> 
> If it was me, I'd probably do something like:
> 
>  
>  Coffee On Mars
> 
> 
> But there are so many ways to handle it, and they way you're doing it isn't
> "wrong", just not the way I'd do it.

Right on…the hide me from view method is one I was encouraged to explore; have 
not yet done so.

Now I know what I’ll be doing this morning.

Thank you for the knowledge and views…in line with best practices, I suppose.

;-)

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris F.A. Johnson]

On Thu, 24 Jul 2014, John wrote:


On Jul 24, 2014, at 8:40 AM, Chris Rockwell  wrote:


I don't think you're recognizing that em's inherit from their parent.

- #header-logo is a child of 
-  has a font-size of 2em (set by user agent stylesheet)
- #header-logo therefore has a base font-size of 2em, or 32px (assuming 16px is 
the base)
- Padding #header-logo by 1.25em is equal to (32 * 1.25)px.

Make sense?

If you want to pad it 20px (1.25em of document base font size), you would need 
to set padding-left to 0.625em

Hopefully I haven't muddied the waters.


No, actually you have un-muddied the waters. So I “did this to myself” in a 
sense, by wrapping that logo in an h1..

So, I either have to keep track of the math, or…is there another, better way I 
should have built that lock-up?

I guess I was going for better SEO by wrapping my logo in an h1 which, now that 
I re-examine, seems like pretty weak sauce…

Perhaps I’d best wrap the logo in a regular div with an id of ‘header-logo’  ?


  Note that you can also specify font-size in rem, which is relative
  to the BODY's font-size. See .

--
Chris F.A. Johnson, __
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[John]

On Jul 24, 2014, at 8:53 AM, Tom Livingston  wrote:
> Not really. You are currently making that the highest level head
> element (h1) of the page. Is that what you want?

Not if the h1-wrapped element is a graphic whose only text opportunity is the 
alt tag.  if that logo were live type, then yes.

Trying to remember my thought process in doing that and it was probably having 
heard someone more experienced than me saying “ALWAYS put a logo inside of an 
h1”

As you say, this is HTML, yet, there is an area where CSS and HTML overlap. I 
respect the difference, and the common ground. 

The common ground is where the markup in a sense informs what the best styling 
might be for that item?

I have to admit a certain laze where I don’t want to keep track of the math; my 
overall padding/margin is 1.25em, which is why I need it to be the same 
computed value throughout.

Thank you all for responding..this has been an important learning opp for me 
and an occasion to reflect on the implications of how I’ve built this item.

John

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris Rockwell]

>
>
> So, I either have to keep track of the math, or…is there another, better
> way I should have built that lock-up?
>
If you want to use em's, you'll need to be aware of parent font sizes.
 Personally, I don't put 's in 's, but I see it in practice all of
the time (and it's acceptable as far as the standards bodies are
concerned).

If it was me, I'd probably do something like:

  
  Coffee On Mars


But there are so many ways to handle it, and they way you're doing it isn't
"wrong", just not the way I'd do it.


>
> I guess I was going for better SEO by wrapping my logo in an h1 which, now
> that I re-examine, seems like pretty weak sauce…
>
I don't know of any tests that would suggest an  in your  in any
way benefits seo


>
> Perhaps I’d best wrap the logo in a regular div with an id of
> ‘header-logo’  ?
>
> John
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Thu, Jul 24, 2014 at 11:45 AM, John  wrote:
> On Jul 24, 2014, at 8:40 AM, Chris Rockwell  wrote:
>
>> I don't think you're recognizing that em's inherit from their parent.
>>
>> - #header-logo is a child of 
>> -  has a font-size of 2em (set by user agent stylesheet)
>> - #header-logo therefore has a base font-size of 2em, or 32px (assuming 16px 
>> is the base)
>> - Padding #header-logo by 1.25em is equal to (32 * 1.25)px.
>>
>> Make sense?
>>
>> If you want to pad it 20px (1.25em of document base font size), you would 
>> need to set padding-left to 0.625em
>>
>> Hopefully I haven't muddied the waters.
>
> No, actually you have un-muddied the waters. So I “did this to myself” in a 
> sense, by wrapping that logo in an h1..
>
> So, I either have to keep track of the math, or…is there another, better way 
> I should have built that lock-up?
>
> I guess I was going for better SEO by wrapping my logo in an h1 which, now 
> that I re-examine, seems like pretty weak sauce…
>
> Perhaps I’d best wrap the logo in a regular div with an id of ‘header-logo’  ?
>
> John
> __


Not really. You are currently making that the highest level head
element (h1) of the page. Is that what you want?

If you get into some of the other HTML sectioning elements, you can
leave it as is (and keep track of the math - or eyeball it like David
said) and add other h1's for other sections. Main content in a
section, with it's own header and h1, or an article element with a
header and h1, etc.

But this is getting into the semantics of HTML which is off-topic for
this list. STYLING those elements would be back on topic. ;-)



-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[John]

On Jul 24, 2014, at 8:40 AM, Chris Rockwell  wrote:

> I don't think you're recognizing that em's inherit from their parent.
> 
> - #header-logo is a child of 
> -  has a font-size of 2em (set by user agent stylesheet)
> - #header-logo therefore has a base font-size of 2em, or 32px (assuming 16px 
> is the base)
> - Padding #header-logo by 1.25em is equal to (32 * 1.25)px.
> 
> Make sense?
> 
> If you want to pad it 20px (1.25em of document base font size), you would 
> need to set padding-left to 0.625em
> 
> Hopefully I haven't muddied the waters.

No, actually you have un-muddied the waters. So I “did this to myself” in a 
sense, by wrapping that logo in an h1..

So, I either have to keep track of the math, or…is there another, better way I 
should have built that lock-up?

I guess I was going for better SEO by wrapping my logo in an h1 which, now that 
I re-examine, seems like pretty weak sauce…

Perhaps I’d best wrap the logo in a regular div with an id of ‘header-logo’  ?

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris Rockwell]

John,

I don't think you're recognizing that em's inherit from their parent.

- #header-logo is a child of 
-  has a font-size of 2em (set by user agent stylesheet)
- #header-logo therefore has a base font-size of 2em, or 32px (assuming
16px is the base)
- Padding #header-logo by 1.25em is equal to (32 * 1.25)px.

Make sense?

If you want to pad it 20px (1.25em of document base font size), you would
need to set padding-left to 0.625em

Hopefully I haven't muddied the waters.

Chris Rockwell


On Thu, Jul 24, 2014 at 11:22 AM, John  wrote:

>
> On Jul 24, 2014, at 8:18 AM, Tom Livingston  wrote:
>
> > ems are relative to font size.
> >
> > Given a browser default of 16px, 1em = 16px.
> >
> > If you have something set at font-size: 120%;, that's 120% bigger than
> > 16px (1em) so, like Chris said, it would be 19px (rounded down) or
> > 1.188em;
>
> This is my understanding, too…so given that my body font-size is set at
> 100%, should not padding-left:1.25em; be 1.25em in size?  What I’m seeing
> is much larger.
>
> http://www.coffeeonmars.com/170_su/template/home.html
>
> Thank you!
>
> John
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Thu, Jul 24, 2014 at 11:38 AM, John  wrote:
> On Jul 24, 2014, at 8:35 AM, Tom Livingston  wrote:
>
>> Where, specifically on the page, are we talking about?
>
> This spot:
>
> http://www.coffeeonmars.com/170_su/template/home.html
>
> this declaration:
>
> #header-logo {
> height: auto;
> margin: 2em 0 0 16px;
> width: 300px;
> }
>
> Notice that margin left value is 16px  (sorry, I said padding)  If you insert 
> 1.25em you get a much larger space than if you insert 20px, which 1.25 em 
> *should* be  (1 em = 16; 1.25 x 16 = 20)
>
> so, 20px is a hard value; ems are relative, but I don’t see what’s making ems 
> in that spot render as more than 100%
>
> Thank you,
>


That's an h1, with a browser default computed font-size of 32px.


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[John]

On Jul 24, 2014, at 8:35 AM, Tom Livingston  wrote:

> Where, specifically on the page, are we talking about?

This spot:

http://www.coffeeonmars.com/170_su/template/home.html

this declaration:

#header-logo {
height: auto;
margin: 2em 0 0 16px;
width: 300px;
}

Notice that margin left value is 16px  (sorry, I said padding)  If you insert 
1.25em you get a much larger space than if you insert 20px, which 1.25 em 
*should* be  (1 em = 16; 1.25 x 16 = 20)

so, 20px is a hard value; ems are relative, but I don’t see what’s making ems 
in that spot render as more than 100%

Thank you,

John

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris F.A. Johnson]

On Thu, 24 Jul 2014, John wrote:



On Jul 24, 2014, at 8:18 AM, Tom Livingston  wrote:


ems are relative to font size.

Given a browser default of 16px, 1em = 16px.

If you have something set at font-size: 120%;, that's 120% bigger than
16px (1em) so, like Chris said, it would be 19px (rounded down) or
1.188em;


This is my understanding, too…so given that my body font-size is set at 100%, 
should not padding-left:1.25em; be 1.25em in size?  What I’m seeing is much 
larger.

http://www.coffeeonmars.com/170_su/template/home.html


   Put a 1px border round the elements in question so that you can see exactly 
where they are. It helps to distinguish between margins and padding (padding is 
inside th$

--
Chris F.A. Johnson, __
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Thu, Jul 24, 2014 at 11:22 AM, John  wrote:
>
> On Jul 24, 2014, at 8:18 AM, Tom Livingston  wrote:
>
>> ems are relative to font size.
>>
>> Given a browser default of 16px, 1em = 16px.
>>
>> If you have something set at font-size: 120%;, that's 120% bigger than
>> 16px (1em) so, like Chris said, it would be 19px (rounded down) or
>> 1.188em;
>
> This is my understanding, too…so given that my body font-size is set at 100%, 
> should not padding-left:1.25em; be 1.25em in size?  What I’m seeing is much 
> larger.
>
> http://www.coffeeonmars.com/170_su/template/home.html
>
> Thank you!
>


Where, specifically on the page, are we talking about?


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[John]

On Jul 24, 2014, at 8:18 AM, Tom Livingston  wrote:

> ems are relative to font size.
> 
> Given a browser default of 16px, 1em = 16px.
> 
> If you have something set at font-size: 120%;, that's 120% bigger than
> 16px (1em) so, like Chris said, it would be 19px (rounded down) or
> 1.188em;

This is my understanding, too…so given that my body font-size is set at 100%, 
should not padding-left:1.25em; be 1.25em in size?  What I’m seeing is much 
larger.

http://www.coffeeonmars.com/170_su/template/home.html

Thank you!

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Tom Livingston]

On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher
 wrote:
> Now you confused me ?
>
>


ems are relative to font size.

Given a browser default of 16px, 1em = 16px.

If you have something set at font-size: 120%;, that's 120% bigger than
16px (1em) so, like Chris said, it would be 19px (rounded down) or
1.188em;


-- 

Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[David Laakso]

On Thu, Jul 24, 2014 at 9:40 AM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> Now you confused me ?
>
>> .
>

An em is the same as the font-size; if your font-size is 120%, an
em will be 20% larger than in a block where the font-size is 100%.

>>>
>>
>


Christopher,

I think your question has been answered. Without knowing the above some of
us who have visual orientation, simply adjust em until it "looks" right.

Best,
David Laakso


-- 
Chelsea Creek Studio
http://ccstudi.com
desktop | laptop | tablet | mobile
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Crest Christopher]

Now you confused me ?

Chris F.A. Johnson wrote:

On Thu, 24 Jul 2014, Crest Christopher wrote:

A 120% font-size is 140%, correct ? I rather verify then assume I 
understand it correctly !


  No. 120% is 120%, i.e. 20% larger than the body (actually than its
  container's) size. 140% is 40% larger.

  IOW, if the body size is 16px, 120% is 19[.2]px.


Chris F.A. Johnson wrote:

On Wed, 23 Jul 2014, John wrote:
On Jul 23, 2014, at 8:38 PM, Crest Christopher 
 wrote:



Large ? What is the size you want ?


I am hoping that ems will be the same size across the board
throughout the page…my understanding is that they’re appx equal to
16px.


   An em is the same as the font-size; if your font-size is 120%, an
   em will be 20% larger than in a block where the font-size is 100%.



__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris F.A. Johnson]

On Thu, 24 Jul 2014, Crest Christopher wrote:

A 120% font-size is 140%, correct ? I rather verify then assume I understand 
it correctly !


  No. 120% is 120%, i.e. 20% larger than the body (actually than its
  container's) size. 140% is 40% larger.

  IOW, if the body size is 16px, 120% is 19[.2]px.


Chris F.A. Johnson wrote:

On Wed, 23 Jul 2014, John wrote:
On Jul 23, 2014, at 8:38 PM, Crest Christopher 
 wrote:



Large ? What is the size you want ?


I am hoping that ems will be the same size across the board
throughout the page…my understanding is that they’re appx equal to
16px.


   An em is the same as the font-size; if your font-size is 120%, an
   em will be 20% larger than in a block where the font-size is 100%.


--
Chris F.A. Johnson, __
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Crest Christopher]

A 120% font-size is 140%, correct ? I rather verify then assume I 
understand it correctly !


Chris F.A. Johnson wrote:

On Wed, 23 Jul 2014, John wrote:
On Jul 23, 2014, at 8:38 PM, Crest Christopher 
 wrote:



Large ? What is the size you want ?


I am hoping that ems will be the same size across the board
throughout the page…my understanding is that they’re appx equal to
16px.


   An em is the same as the font-size; if your font-size is 120%, an
   em will be 20% larger than in a block where the font-size is 100%.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris F.A. Johnson]

On Thu, 24 Jul 2014, Chris F.A. Johnson wrote:


On Wed, 23 Jul 2014, John wrote:
On Jul 23, 2014, at 8:38 PM, Crest Christopher  
wrote:



Large ? What is the size you want ?


I am hoping that ems will be the same size across the board
throughout the page…my understanding is that they’re appx equal to
16px.


  An em is the same as the font-size; if your font-size is 120%, an
  em will be 20% larger than in a block where the font-size is 100%.


   See .

--
Chris F.A. Johnson, __
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Chris F.A. Johnson]

On Wed, 23 Jul 2014, John wrote:

On Jul 23, 2014, at 8:38 PM, Crest Christopher  
wrote:


Large ? What is the size you want ?


I am hoping that ems will be the same size across the board
throughout the page…my understanding is that they’re appx equal to
16px.


   An em is the same as the font-size; if your font-size is 120%, an
   em will be 20% larger than in a block where the font-size is 100%.

--
Chris F.A. Johnson, __
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[John]

On Jul 23, 2014, at 8:38 PM, Crest Christopher  
wrote:

> Large ? What is the size you want ?

I am hoping that ems will be the same size across the board throughout the 
page…my understanding is that they’re appx equal to 16px.

Granted when the user zooms in or out the em size will change, but an em here 
should be the same as an em there..

J
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] why are ems rendering large?

[Crest Christopher]

Large ? What is the size you want ?

Christopher

John wrote:

back at this site:  http://www.coffeeonmars.com/170_su/template/home.html

I am trying to adjust  space to the left to be 1.25em but on some items, like 
#header-logo a value of padding-left1.25em produces a space to the eye that 
looks 2-3 times that. if I put in 20px, I get a visually correct result.

So, something is affecting how the browser is interpreting an “em,” right?

Any suggestions as to what is at work here? Have I unwittingly told the browser 
that an em is more than an em in some locations, but normal-value in others? 
that is what it feels like working with this code.

Thank you,

John
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/