Re: [css-d] Font-sizes & EM

[Crest Christopher]

Your solution is to go from em, then to vw, back to em all depending on 
the view port. Max size desired would be when the viewport width is 
extremely large ?



Tom Livingston 
Sunday, March 19, 2017 8:13 PMvia Postbox 


1vw = 1% of the viewport width. But, in the case of a desktop browser, the
width is variable - hence the beauty of the vw/vh units. Provided the
browser supports these units.

See http://caniuse.com/#feat=viewport-units

It's not that easy though as fonts using vw can quickly become too tiny or
extremely huge depending on the viewport.

When I have tried them, and I have used them sparingly, I set the font in
ems (or rems most likely) for a base (mobile) style, then at a certain
wider breakpoint changed to vw, and then changed back to ems/rems when the
font has gotten to the max size I desired. I have seen SASS mixins that
implement a min/max but it had its limitations.





Tom Livingston 
Sunday, March 19, 2017 8:04 PMvia Postbox 


I see that as if the viewport is 800px wide, then 800px is 100% of the
width.



On Sun, Mar 19, 2017 at 7:56 PM, Crest Christopher <


Tom Livingston 
Sunday, March 19, 2017 7:52 PMvia Postbox 

No. Viewport units are based on the viewport. 1vw = 1% of viewport 
width, 1vh = 1% viewport height.





--

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




#663399
Crest Christopher 
Sunday, March 19, 2017 7:45 PMvia Postbox 


What is 1vw, a pixel ?


Tom Livingston 
Sunday, March 19, 2017 7:39 PMvia Postbox 


No.

Viewport units are based on the viewport. 1vw = 1% of viewport width, 
1vh =

1% viewport height.



On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher <



__
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] Font-sizes & EM

[oleg...@gmail.com]

No, not correct no - doubling or tripling, or whatever.

When you set, for example, html * { font-size: 2vw' }, you are setting base
font size for the page(s), 1vw is 1% of the screen's viewport's width. So,
if, for example, your viewport width is 1704 pixels, then 1vw will equal
17px, and 2vw will equal 34px. Then, when you set a font for any element,
let's say  to 2em, the actual font size will be 2vw (base font size you
set) x 2em (the font size you set for  element), which will result to 68
pixels.

On Sun, Mar 19, 2017 at 3:30 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> If understood correctly based on the article Rainer posted.
>
> 1em = 2vw, 4em = 8vw etc ?
>
> Rainer Berthold 
>> Sunday, March 19, 2017 2:39 PMvia Postbox > utm_source=email_medium=sumlink_campaign=reach>
>> Sorry, can’t follow. Tom’s post may help.
>>
>> Best, Rainer
>>
>>
>> Am 19.03.2017 um 16:03 schrieb Crest Christopher <
>> crestchristop...@gmail.com>:
>>
>> Based on what I read in the article; EM are always double in VW ?
>>
>>
>>
>> __
>> 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/
>> Crest Christopher 
>> Sunday, March 19, 2017 11:03 AMvia Postbox > utm_source=email_medium=sumlink_campaign=reach>
>>
>> Based on what I read in the article; EM are always double in VW ?
>>
>>
>>
>> Rainer Berthold 
>> Sunday, March 19, 2017 2:12 AMvia Postbox > utm_source=email_medium=sumlink_campaign=reach>
>> Maybe this is an interesting read:
>> https://www.smashingmagazine.com/2016/05/fluid-typography/
>>
>> Best, Rainer
>>
>>
>> Am 19.03.2017 um 04:45 schrieb Crest Christopher <
>> crestchristop...@gmail.com>:
>>
>> I'm use to using fixed heights for fonts, pixel being the main one. If I
>> want to have a font adjust based on screen size, percentages is the best
>> route to follow, correct ?
>>
>> Why use EM if it's equal to pixels anyhow ?
>>
>>
>> __
>> 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/
>>
>> Crest Christopher 
>> Saturday, March 18, 2017 11:45 PMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email_medium=su
>> mlink_campaign=reach>
>> I'm use to using fixed heights for fonts, pixel being the main one. If I
>> want to have a font adjust based on screen size, percentages is the best
>> route to follow, correct ?
>>
>> Why use EM if it's equal to pixels anyhow ?
>>
>>
>>
> __
> 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] Font-sizes & EM

[Tom Livingston]

1vw = 1% of the viewport width. But, in the case of a desktop browser, the
width is variable - hence the beauty of the vw/vh units. Provided the
browser supports these units.

See http://caniuse.com/#feat=viewport-units

It's not that easy though as fonts using vw can quickly become too tiny or
extremely huge depending on the viewport.

When I have tried them, and I have used them sparingly, I set the font in
ems (or rems most likely) for a base (mobile) style, then at a certain
wider breakpoint changed to vw, and then changed back to ems/rems when the
font has gotten to the max size I desired. I have seen SASS mixins that
implement a min/max but it had its limitations.


On Sun, Mar 19, 2017 at 8:04 PM, Tom Livingston  wrote:

> I see that as if the viewport is 800px wide, then 800px is 100% of the
> width.
>
>
>
> On Sun, Mar 19, 2017 at 7:56 PM, Crest Christopher <
> crestchristop...@gmail.com> wrote:
>
>> Therefore, if the viewport width is 800px = 8% of viewport width; if I'm
>> doing the math right ?
>>
>> Tom Livingston 
>> Sunday, March 19, 2017 7:52 PM via Postbox
>> 
>> No. Viewport units are based on the viewport. 1vw = 1% of viewport
>> width, 1vh = 1% viewport height.
>>
>>
>>
>>
>> --
>>
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>>
>>
>> #663399
>> Crest Christopher 
>> Sunday, March 19, 2017 7:45 PM via Postbox
>> 
>> What is 1vw, a pixel ?
>>
>>
>> Tom Livingston 
>> Sunday, March 19, 2017 7:39 PM via Postbox
>> 
>> No.
>>
>> Viewport units are based on the viewport. 1vw = 1% of viewport width, 1vh
>> =
>> 1% viewport height.
>>
>>
>>
>> On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher <
>>
>> Crest Christopher 
>> Sunday, March 19, 2017 6:30 PM via Postbox
>> 
>> If understood correctly based on the article Rainer posted.
>>
>> 1em = 2vw, 4em = 8vw etc ?
>>
>>
>> Rainer Berthold 
>> Sunday, March 19, 2017 2:39 PM via Postbox
>> 
>> Sorry, can’t follow. Tom’s post may help.
>>
>> Best, Rainer
>>
>>
>> Am 19.03.2017 um 16:03 schrieb Crest Christopher
>>  :
>>
>> Based on what I read in the article; EM are always double in VW ?
>>
>>
>>
>> __
>> 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/
>>
>>
>>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
>



-- 

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


#663399
__
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] Font-sizes & EM

[Tom Livingston]

I see that as if the viewport is 800px wide, then 800px is 100% of the
width.



On Sun, Mar 19, 2017 at 7:56 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> Therefore, if the viewport width is 800px = 8% of viewport width; if I'm
> doing the math right ?
>
> Tom Livingston 
> Sunday, March 19, 2017 7:52 PM via Postbox
> 
> No. Viewport units are based on the viewport. 1vw = 1% of viewport width,
> 1vh = 1% viewport height.
>
>
>
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> Crest Christopher 
> Sunday, March 19, 2017 7:45 PM via Postbox
> 
> What is 1vw, a pixel ?
>
>
> Tom Livingston 
> Sunday, March 19, 2017 7:39 PM via Postbox
> 
> No.
>
> Viewport units are based on the viewport. 1vw = 1% of viewport width, 1vh =
> 1% viewport height.
>
>
>
> On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher <
>
> Crest Christopher 
> Sunday, March 19, 2017 6:30 PM via Postbox
> 
> If understood correctly based on the article Rainer posted.
>
> 1em = 2vw, 4em = 8vw etc ?
>
>
> Rainer Berthold 
> Sunday, March 19, 2017 2:39 PM via Postbox
> 
> Sorry, can’t follow. Tom’s post may help.
>
> Best, Rainer
>
>
> Am 19.03.2017 um 16:03 schrieb Crest Christopher
>  :
>
> Based on what I read in the article; EM are always double in VW ?
>
>
>
> __
> 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/
>
>
>


-- 

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


#663399
__
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] Font-sizes & EM

[Crest Christopher]

Therefore, if the viewport width is 800px = 8% of viewport width; if I'm 
doing the math right ?



Tom Livingston 
Sunday, March 19, 2017 7:52 PMvia Postbox 

No. Viewport units are based on the viewport. 1vw = 1% of viewport 
width, 1vh = 1% viewport height.





--

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




#663399
Crest Christopher 
Sunday, March 19, 2017 7:45 PMvia Postbox 


What is 1vw, a pixel ?


Tom Livingston 
Sunday, March 19, 2017 7:39 PMvia Postbox 


No.

Viewport units are based on the viewport. 1vw = 1% of viewport width, 
1vh =

1% viewport height.



On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher <

Crest Christopher 
Sunday, March 19, 2017 6:30 PMvia Postbox 


If understood correctly based on the article Rainer posted.

1em = 2vw, 4em = 8vw etc ?


Rainer Berthold 
Sunday, March 19, 2017 2:39 PMvia Postbox 


Sorry, can’t follow. Tom’s post may help.

Best, Rainer


Am 19.03.2017 um 16:03 schrieb Crest Christopher 
:


Based on what I read in the article; EM are always double in VW ?



__
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] Font-sizes & EM

[Tom Livingston]

No. Viewport units are based on the viewport. 1vw = 1% of viewport width,
1vh = 1% viewport height.



On Sun, Mar 19, 2017 at 7:45 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> What is 1vw, a pixel ?
>
>
>
>


-- 

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


#663399
__
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] Font-sizes & EM

[Crest Christopher]

What is 1vw, a pixel ?


Tom Livingston 
Sunday, March 19, 2017 7:39 PMvia Postbox 


No.

Viewport units are based on the viewport. 1vw = 1% of viewport width, 
1vh =

1% viewport height.



On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher <

Crest Christopher 
Sunday, March 19, 2017 6:30 PMvia Postbox 


If understood correctly based on the article Rainer posted.

1em = 2vw, 4em = 8vw etc ?


Rainer Berthold 
Sunday, March 19, 2017 2:39 PMvia Postbox 


Sorry, can’t follow. Tom’s post may help.

Best, Rainer


Am 19.03.2017 um 16:03 schrieb Crest Christopher 
:


Based on what I read in the article; EM are always double in VW ?



__
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/
Crest Christopher 
Sunday, March 19, 2017 11:03 AMvia Postbox 


Based on what I read in the article; EM are always double in VW ?



Rainer Berthold 
Sunday, March 19, 2017 2:12 AMvia Postbox 


Maybe this is an interesting read:
https://www.smashingmagazine.com/2016/05/fluid-typography/

Best, Rainer


Am 19.03.2017 um 04:45 schrieb Crest Christopher 
:


I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?


__
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] Font-sizes & EM

[Tom Livingston]

No.

Viewport units are based on the viewport. 1vw = 1% of viewport width, 1vh =
1% viewport height.



On Sun, Mar 19, 2017 at 6:30 PM, Crest Christopher <
crestchristop...@gmail.com> wrote:

> If understood correctly based on the article Rainer posted.
>
> 1em = 2vw, 4em = 8vw etc ?
>
> Rainer Berthold 
>> Sunday, March 19, 2017 2:39 PMvia Postbox > utm_source=email_medium=sumlink_campaign=reach>
>>
>

-- 

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


#663399
__
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] Font-sizes & EM

[Crest Christopher]

If understood correctly based on the article Rainer posted.

1em = 2vw, 4em = 8vw etc ?


Rainer Berthold 
Sunday, March 19, 2017 2:39 PMvia Postbox 


Sorry, can’t follow. Tom’s post may help.

Best, Rainer


Am 19.03.2017 um 16:03 schrieb Crest Christopher 
:


Based on what I read in the article; EM are always double in VW ?



__
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/
Crest Christopher 
Sunday, March 19, 2017 11:03 AMvia Postbox 


Based on what I read in the article; EM are always double in VW ?



Rainer Berthold 
Sunday, March 19, 2017 2:12 AMvia Postbox 


Maybe this is an interesting read:
https://www.smashingmagazine.com/2016/05/fluid-typography/

Best, Rainer


Am 19.03.2017 um 04:45 schrieb Crest Christopher 
:


I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?


__
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/

Crest Christopher 
Saturday, March 18, 2017 11:45 PMvia Postbox 

I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?




__
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] Font-sizes & EM

[Rainer Berthold]

Sorry, can’t follow.  Tom’s post may help.

Best, Rainer


Am 19.03.2017 um 16:03 schrieb Crest Christopher :

Based on what I read in the article; EM are always double in VW ?


> Rainer Berthold 
> Sunday, March 19, 2017 2:12 AMvia Postbox 
> 
> Maybe this is an interesting read:
> https://www.smashingmagazine.com/2016/05/fluid-typography/
> 
> Best, Rainer
> 
> 
> Am 19.03.2017 um 04:45 schrieb Crest Christopher :
> 
> I'm use to using fixed heights for fonts, pixel being the main one. If I want 
> to have a font adjust based on screen size, percentages is the best route to 
> follow, correct ?
> 
> Why use EM if it's equal to pixels anyhow ?
> 
> 
> __
> 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/
> 
> Crest Christopher 
> Saturday, March 18, 2017 11:45 PMvia Postbox 
> 
> I'm use to using fixed heights for fonts, pixel being the main one. If I want 
> to have a font adjust based on screen size, percentages is the best route to 
> follow, correct ?
> 
> Why use EM if it's equal to pixels anyhow ?
> 
> 

__
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] Font-sizes & EM

[Crest Christopher]

Based on what I read in the article; EM are always double in VW ?



Rainer Berthold 
Sunday, March 19, 2017 2:12 AMvia Postbox 


Maybe this is an interesting read:
https://www.smashingmagazine.com/2016/05/fluid-typography/

Best, Rainer


Am 19.03.2017 um 04:45 schrieb Crest Christopher 
:


I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?


__
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/

Crest Christopher 
Saturday, March 18, 2017 11:45 PMvia Postbox 

I'm use to using fixed heights for fonts, pixel being the main one. If 
I want to have a font adjust based on screen size, percentages is the 
best route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?




__
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] Font-sizes & EM

[Tom Livingston]

EMs are relative units. They are relative to a users preference setting,
typically in px, but they scale based on what size the user has set. Some
one with poor eye sight might set their browser default at 30px. By using
ems your site will automatically honor the users wish to have a large font
size so they can read it. (Hopefully you build your site in such a way that
this didn't break it).

Also, in the past, some browsers would not scale font set in px when a user
used the zoom feature in the browser. Ems scaled.



On Sat, Mar 18, 2017 at 11:52 PM Crest Christopher <
crestchristop...@gmail.com> wrote:

> I'm use to using fixed heights for fonts, pixel being the main one. If I
> want to have a font adjust based on screen size, percentages is the best
> route to follow, correct ?
>
> Why use EM if it's equal to pixels anyhow ?
>
>
> __
> 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/

-- 

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


#663399
__
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] Font-sizes & EM

[Rainer Berthold]

Maybe this is an interesting read:
https://www.smashingmagazine.com/2016/05/fluid-typography/

Best, Rainer


Am 19.03.2017 um 04:45 schrieb Crest Christopher :

I'm use to using fixed heights for fonts, pixel being the main one. If I want 
to have a font adjust based on screen size, percentages is the best route to 
follow, correct ?

Why use EM if it's equal to pixels anyhow ?


__
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-d] Font-sizes & EM

[Crest Christopher]

I'm use to using fixed heights for fonts, pixel being the main one. If I 
want to have a font adjust based on screen size, percentages is the best 
route to follow, correct ?


Why use EM if it's equal to pixels anyhow ?


__
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] Font-Sizes - Golden Rule ?

[Karl DeSaulniers]

On Apr 9, 2014, at 12:07 AM, Karl DeSaulniers k...@designdrumm.com wrote:

 
 On Apr 9, 2014, at 12:04 AM, Karl DeSaulniers k...@designdrumm.com wrote:
 
 On Apr 9, 2014, at 12:01 AM, Crest Christopher crestchristop...@gmail.com 
 wrote:
 
 I think percentages are based on their parents size and not the browser.
 What do you mean ?
 
 Karl DeSaulniers wrote:
 
 
 I think percentages are based on their parents size and not the browser.
 Correct me if I am wrong.
 
 Best,
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com
 
 
 I mean that when you set say a width of 50% to a paragraph that is in a div 
 that has a width of 110px, the paragragraph is going to be 50% of 110px and 
 not the browser window.
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com
 
 Although, I think there may be an exception to that rule when mixing in 
 absolute positioning and floating. But not 100% on that.
 
 Best,
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com


Looks like there are some exceptions. Have a look see...
There ARE a few that took on the browser width, but the majority stuck with 
their parent. 

http://designdrumm.com/percentage_test.html

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] Font-Sizes - Golden Rule ?

[MiB]

apr 9 2014 08:48 Karl DeSaulniers k...@designdrumm.com:

 Looks like there are some exceptions. Have a look see...
 There ARE a few that took on the browser width, but the majority stuck with 
 their parent. 
 
 http://designdrumm.com/percentage_test.html

Which are the exceptions you mean?
__
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] Font-Sizes - Golden Rule ?

[Philippe Wittenbergh]

Le 9 avr. 2014 à 15:48, Karl DeSaulniers k...@designdrumm.com a écrit :

 Looks like there are some exceptions. Have a look see...
 There ARE a few that took on the browser width, but the majority stuck with 
 their parent. 
 
 http://designdrumm.com/percentage_test.html

1. An element that is position: absolute with a percentage width takes its 
width from its nearest _positioned_ parent [ex1] else from the root element 
[ex2]

see:
http://www.w3.org/TR/CSS21/visudet.html#propdef-width
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width

[ex1] div style=position: relative; width: 10em
p style=position: absolute width: 50%;  // computed value for 
width: 5em
[ex2] body
div style=width: 10em
p style=position: absolute width: 50%;  // computed value for 
width: half the width of the browser window

For ultimate fun in this:
[ex3] div style=position: absolute; // no width specified, shrink-to-fit
p style=position: absolute width: 50%;  // computed value for 
width: undefined

2. An element that has position:absolute and float: left (or right) will have 
as computed value: float: none;
see http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo (bullet point 2)



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] Font-Sizes - Golden Rule ?

[GJim]

Howdy Crest,

~~~
Tuesday, April 8, 2014, 9:24:14 PM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.

My reply appears here and/or interspersed within your message.
~~~

 Em are the best solution for font-sizes, from everything that I know.
 Pixels I don't know if pixels should be used at all and percentages from 
 what I know are relative to the browser size, is this correct or am I 
 mis-understanding something.

Newbie here, have been a member for only a few days.

I had been using 'small', or 'medium', for general text and links, and then %
for other (larger, i.e. h1, h2, c.) elements.

I use Firefox as my main browser, but also keep latest versions of IE, Opera,
Chrome, Safari, and Maxthon for testing.

I have found an issue with Opera (v12.16 is installed) when using 'small' vs %.

Using 'small', when viewing a site in a less-than-full-screen window, decreasing
the width of the window can lead to a link text wrapping rather than
proportionally shrinking with the column. If I define the link text as '87.5%',
the link does not wrap, but shrinks as I would want/expect.

I do not see this action in other browsers - all the others that I test with
keep the link proportional and it does not wrap.

Link, to see this in action:
http://www.rmaba.org/rmaba_members2014.html

Using Opera, shrink horizontal width and watch the link titled 'Colorado Springs
Area', in the right-hand column.  At the moment, text in that box is defined as
'small'.  If I change that to '87.5%', then that link text will not wrap - the
same as occurs in other browsers regardless of using 'small' or the %.

G'Jim c):{-
--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com

Savvy ponderable:
A smile from a good woman is worth more'n 
 a dozen handed out by a bartender.


---
This email is free from viruses and malware because avast! Antivirus protection 
is active.
http://www.avast.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] Font-Sizes - Golden Rule ?

[Tim Climis]

 How did you calculate 100% = 1em ?
 Mostly everyone used, including myself pixels for box sizing, I hope you
were referring to creating a DIV as in box sizing ? What do you mean by
percentages are based on browser size ?
 
 (although, it would be kind of fun if 100% resulted in letters 
 hundreds of pixels high...)
 
 ---Tim
 

 I think percentages are based on their parents size and not the browser.
 Correct me if I am wrong.

You are correct (except for the exceptions mentioned later by other people),
and of course for fonts.

The original question was about fonts.  None of the box-model percent sizing
tangents matter.  My comment was based on this from the OP:

 percentages from what I know are relative to the browser size

And that's only remotely true in the context of boxes.

For example, if I have a rule that says 
body { 
font-size: 50%; 
width: 50%;
} 

My font size is 8px (assuming browser defaults).  But my body width is NOT
8px.  It is in fact half of my browser width.  And so my point, which is
still valid, is that font percent and other percent are not the same thing.

---Tim

__
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] Font-Sizes - Golden Rule ?

[Tom Livingston]

On Wed, Apr 9, 2014 at 11:33 AM, Tim Climis tim.cli...@gmail.com wrote:
 How did you calculate 100% = 1em ?
 Mostly everyone used, including myself pixels for box sizing, I hope you
 were referring to creating a DIV as in box sizing ? What do you mean by
 percentages are based on browser size ?

 (although, it would be kind of fun if 100% resulted in letters
 hundreds of pixels high...)

 ---Tim


 I think percentages are based on their parents size and not the browser.
 Correct me if I am wrong.

 You are correct (except for the exceptions mentioned later by other people),
 and of course for fonts.

 The original question was about fonts.  None of the box-model percent sizing
 tangents matter.  My comment was based on this from the OP:

 percentages from what I know are relative to the browser size

 And that's only remotely true in the context of boxes.

 For example, if I have a rule that says
 body {
 font-size: 50%;
 width: 50%;
 }

I'll add that ems and % for font sizes will compound.

ul
 li class=aHi
  ulli class=bThere/li/ul
 /li
/ul

A rule of li{font-size: 50%;} for the above will cause Hi to be 1/2
the size of it's parent (or browser default) and There will be 1/2
the size of Hi.




-- 

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] Font-Sizes - Golden Rule ?

[Tim Climis]

How did you calculate 100% = 1em ? 

That's the definition in the spec.  On the 'font-size' property, [ems]
refer to the computed font size of the parent element.

So 1em equals the font-size of the parent element.

And [percentages] refer to inherited font-size.  The inherited font size
of an element is the font-size of the parent element.  

So 100% equals the font-size of the parent element.

Therefore, 1em = 100% = the font-size of the parent element.

---Tim

__
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] Font-Sizes - Golden Rule ?

[Shari]

If you use rem's it stays consistent from the body tag... correct?

Shari
__
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] Font-Sizes - Golden Rule ?

[Tom Livingston]

Sent from my iPhone

 On Apr 9, 2014, at 12:05 PM, Shari webweave...@gmail.com wrote:
 
 If you use rem's it stays consistent from the body tag... correct?

Correct. It is relative to the root.



 
 Shari
 __
 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] Font-Sizes - Golden Rule ?

[Georg]

Den 09.04.2014 17:00, skrev GJim:

I have found an issue with Opera (v12.16 is installed) when using 'small' vs %.



Note that Opera v/12.16 uses the old Presto engine, for which all 
development is frosen/ended. A good browser, but no good designing 
for/in it anymore.


Download Opera 20+ that uses the Blink engine, same as Google Chrome 32+ 
and with very few differences from this in how it renders anything.


regards
Georg
__
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] Font-Sizes - Golden Rule ?

[Philip Taylor]

GJim wrote:


according to site stats, I have visitors still using IE3!


I /think/ I would check whether my site statistics had been
updated this millenium, if I were you ...

Philip Taylor
__
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] Font-Sizes - Golden Rule ?

[GJim]

Howdy Georg,

~~~
Wednesday, April 9, 2014, 1:09:22 PM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.

My reply appears here and/or interspersed within your message.
~~~

 Note that Opera v/12.16 uses the old Presto engine, for which all
 development is frosen/ended. A good browser, but no good designing 
 for/in it anymore.

 Download Opera 20+ that uses the Blink engine, same as Google Chrome 32+ 
 and with very few differences from this in how it renders anything.

 regards
  Georg

Thanks for that info.  Have downloaded Opera 20 and will use that to test with,
going forward.  I may very well have site visitors using older versions of Opera
- according to site stats, I have visitors still using IE3!

G'Jim c):{-
--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com

Savvy ponderable:
When people ask me What's your sign? 
 I jist tell 'em it's a flashin' one 
 ... that sez 'The Bar is Open'.


---
This email is free from viruses and malware because avast! Antivirus protection 
is active.
http://www.avast.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] Font-Sizes - Golden Rule ?

[Eric]

Not not correct - The value of a REM is taken from the font-size of the root
element...thus the HTML element, not the BODY element.


 On April 9, 2014 at 12:05 PM Shari webweave...@gmail.com wrote:


 If you use rem's it stays consistent from the body tag... correct?

 Shari
 __
 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] Font-Sizes - Golden Rule ?

[Eric]

Opps, forgot to add this:

Yes, if you use REM the value will stay consistent with the value of font-size
set on root element. If you use a percentage for the root element's font-size
your other font-sizes will vary depending on the browser's default font size
setting...Some have no problem with that, others do.

 On April 9, 2014 at 12:05 PM Shari webweave...@gmail.com wrote:


 If you use rem's it stays consistent from the body tag... correct?

 Shari
 __
 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] Font-Sizes - Golden Rule ?

[GJim]

Howdy Philip,

~~~
Wednesday, April 9, 2014, 1:37:54 PM (USA 'Somewhere on-the-road time-zone'),
you wrote the message that appears below.

My reply appears here and/or interspersed within your message.
~~~

 I /think/ I would check whether my site statistics had been
 updated this millenium, if I were you ...

 Philip Taylor

They are updated daily, with monthly summaries.

G'Jim c):{-
--
Custom book-boxes: http://www.wyomerc.com/bookboxes/bookboxes.html
Book repairs: http://www.wyomerc.com/bookrepair/bookrepairs.html
My photography: http://www.gjim.com

Savvy ponderable:
Experience is another word fer mistakes.


---
This email is free from viruses and malware because avast! Antivirus protection 
is active.
http://www.avast.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] Font-Sizes - Golden Rule ?

[Crest Christopher]

I thought Opera went to webkit, or is Blink just another term for webkit ?

Georg wrote:

Den 09.04.2014 17:00, skrev GJim:
I have found an issue with Opera (v12.16 is installed) when using 
'small' vs %.




Note that Opera v/12.16 uses the old Presto engine, for which all 
development is frosen/ended. A good browser, but no good designing 
for/in it anymore.


Download Opera 20+ that uses the Blink engine, same as Google Chrome 
32+ and with very few differences from this in how it renders anything.


regards
Georg
__
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] Font-Sizes - Golden Rule ?

[Felix Miata]

On 2014-04-09 20:33 (GMT-0400) Crest Christopher composed:


I thought Opera went to webkit, or is Blink just another term for webkit ?


WebKit is a fork of KHTML. Blink is a fork of WebKit.

http://en.wikipedia.org/wiki/Fork_%28software_development%29
--
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] Font-Sizes - Golden Rule ?

[Georg]

Den 10.04.2014 02:33, skrev Crest Christopher:

I thought Opera went to webkit, or is Blink just another term for webkit ?


WebKit is a branch of the KDE open source project, and so is Blink. 
Google and Opera decided not all that long ago to split from WebKit, and 
called their engine-version Blink. Although right now we can hardly 
distinguish Blink from WebKit, over time differences will start to show up.


For instance a differnt way to test out new solutions, where WebKit 
based browsers probably will continue to use vendor-specific extensions 
that we web coders can choose to use. Blink based browsers OTOH have 
started to incorporate tests of new solutions in a way that lets the 
individual end-user decide if s/he want to try them out or not -- fewer 
and fewer vendor-specific extensions for us coders to use and worry 
about in Blink.


In addition to differences between WebKit and Blink showing up, I have 
also observed minor differences between Blink-implementations in Google 
Chrome and Opera. Whether or not that over time will lead to another 
engine-split, is too early to tell.


regards
Georg
__
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-d] Font-Sizes - Golden Rule ?

[Crest Christopher]

Em are the best solution for font-sizes, from everything that I know.  
Pixels I don't know if pixels should be used at all and percentages from 
what I know are relative to the browser size, is this correct or am I 
mis-understanding something.


I'm not studying typography, maybe there are some on this list that are 
typography experts that could give me a long explanation, that is not 
what I'm after.  What I want to know is the differences and when to use 
each one, and is there one, whether it's px or percentages that should 
be used the least ?


Thanks everyone and I want to say thanks to the list who have helped me 
even though they are extremely busy :)


!DOCTYPE html
html lang=en
head
style
  p.one {font-size:3em;}
  p.two {font-size:34px;}
  p.three {font-size:34%;}
/style
/head
body
p class=oneThe Witch should go under a rock/p
p class=twoThe Witch should go under a rock/p
p class=threeThe Wtich should go under a rock/p

/body
/html
__
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] Font-Sizes - Golden Rule ?

[Tim Climis]

On Tuesday, April 08, 2014 10:24:14 PM Crest Christopher wrote:
 Em are the best solution for font-sizes, from everything that I know.
 Pixels I don't know if pixels should be used at all and percentages 
from
 what I know are relative to the browser size, is this correct or am I
 mis-understanding something.

For box sizing, percentages are based on browser size.  But fonts 
don't work like box-sizing.  for fonts, 100% = 1em.  120% = 1.2em.  
90% = .9em, etc.  So which one you use is up to personal preference.

(although, it would be kind of fun if 100% resulted in letters hundreds of 
pixels high...)

---Tim

__
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] Font-Sizes - Golden Rule ?

[Crest Christopher]

Tim Climis wrote:


On Tuesday, April 08, 2014 10:24:14 PM Crest Christopher wrote:

 Em are the best solution for font-sizes, from everything that I know.

 Pixels I don't know if pixels should be used at all and percentages from

 what I know are relative to the browser size, is this correct or am I

 mis-understanding something.

For box sizing, percentages are based on browser size. But fonts don't 
work like box-sizing. for fonts, 100% = 1em. 120% = 1.2em. 90% = .9em, 
etc. So which one you use is up to personal preference.




How did you calculate 100% = 1em ?
Mostly everyone used, including myself pixels for box sizing, I hope you 
were referring to creating a DIV as in box sizing ? What do you mean by 
percentages are based on browser size ?


(although, it would be kind of fun if 100% resulted in letters 
hundreds of pixels high...)


---Tim


__
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] Font-Sizes - Golden Rule ?

[Karl DeSaulniers]

On Apr 8, 2014, at 11:02 PM, Crest Christopher crestchristop...@gmail.com 
wrote:

 
 
 Tim Climis wrote:
 
 On Tuesday, April 08, 2014 10:24:14 PM Crest Christopher wrote:
 
  Em are the best solution for font-sizes, from everything that I know.
 
  Pixels I don't know if pixels should be used at all and percentages from
 
  what I know are relative to the browser size, is this correct or am I
 
  mis-understanding something.
 
 For box sizing, percentages are based on browser size. But fonts don't work 
 like box-sizing. for fonts, 100% = 1em. 120% = 1.2em. 90% = .9em, etc. So 
 which one you use is up to personal preference.
 
 
 How did you calculate 100% = 1em ?
 Mostly everyone used, including myself pixels for box sizing, I hope you were 
 referring to creating a DIV as in box sizing ? What do you mean by 
 percentages are based on browser size ?
 
 (although, it would be kind of fun if 100% resulted in letters hundreds of 
 pixels high...)
 
 ---Tim
 

I think percentages are based on their parents size and not the browser.
Correct me if I am wrong.

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] Font-Sizes - Golden Rule ?

[Crest Christopher]

   I think percentages are based on their parents size and not the browser.

What do you mean ?

Karl DeSaulniers wrote:

On Apr 8, 2014, at 11:02 PM, Crest Christophercrestchristop...@gmail.com  
wrote:


Tim Climis wrote:

On Tuesday, April 08, 2014 10:24:14 PM Crest Christopher wrote:


Em are the best solution for font-sizes, from everything that I know.
Pixels I don't know if pixels should be used at all and percentages from
what I know are relative to the browser size, is this correct or am I
mis-understanding something.

For box sizing, percentages are based on browser size. But fonts don't work 
like box-sizing. for fonts, 100% = 1em. 120% = 1.2em. 90% = .9em, etc. So which 
one you use is up to personal preference.


How did you calculate 100% = 1em ?
Mostly everyone used, including myself pixels for box sizing, I hope you were referring 
to creating a DIV as in box sizing ? What do you mean by percentages are based on 
browser size ?


(although, it would be kind of fun if 100% resulted in letters hundreds of 
pixels high...)

---Tim


I think percentages are based on their parents size and not the browser.
Correct me if I am wrong.

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/

__
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] Font-Sizes - Golden Rule ?

[Karl DeSaulniers]

On Apr 9, 2014, at 12:01 AM, Crest Christopher crestchristop...@gmail.com 
wrote:

   I think percentages are based on their parents size and not the browser.
   What do you mean ?
 
 Karl DeSaulniers wrote:
 
 
 I think percentages are based on their parents size and not the browser.
 Correct me if I am wrong.
 
 Best,
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com


I mean that when you set say a width of 50% to a paragraph that is in a div 
that has a width of 110px, the paragragraph is going to be 50% of 110px and not 
the browser window.

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] Font-Sizes - Golden Rule ?

[Karl DeSaulniers]

On Apr 9, 2014, at 12:04 AM, Karl DeSaulniers k...@designdrumm.com wrote:

 On Apr 9, 2014, at 12:01 AM, Crest Christopher crestchristop...@gmail.com 
 wrote:
 
 I think percentages are based on their parents size and not the browser.
  What do you mean ?
 
 Karl DeSaulniers wrote:
 
 
 I think percentages are based on their parents size and not the browser.
 Correct me if I am wrong.
 
 Best,
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com
 
 
 I mean that when you set say a width of 50% to a paragraph that is in a div 
 that has a width of 110px, the paragragraph is going to be 50% of 110px and 
 not the browser window.
 
 Karl DeSaulniers
 Design Drumm
 http://designdrumm.com

Although, I think there may be an exception to that rule when mixing in 
absolute positioning and floating. But not 100% on that.

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] Font Sizes

[Michael Adams]

On Tue, 08 Apr 2008 18:43:14 -0500
Alan Gutierrez wrote:

 I'm noticing that when I specify font sizes using em, they are  
 slightly smaller in Firefox than in Safari. This becomes a problem  
 when the font sizes get smaller. In Safari they are the right size,  
 but in Firefox they are almost illegible.
 
 I couldn't dig anything up on Google, probably searching with the  
 wrong terms. Could anyone point me to a discussion of or article on  
 this particular quirk?
 

In theory this is part of the users right to control how large the font
is they are viewing themselves[1]. In practise this is not often reality
as most users are not aware they can control the default browser font
size.

To a web developer the optimum for accessibility is to not use a font
under 1em. In practise space in areas like sidebars can force many
developers to set a pixel font size[2]. What i try to do is specify my
fonts in ems and check that degredation is ok in IE at Largest font
setting and in Firefox for at least 3 Larger settings (found in the view
menu of both browsers) before becoming unreadable. Trying to have too
fine-grained control over fonts is a hangover many print designers
persist in hanging on to. Designing for the internet is a compromise on
many fronts.

One last thing you may wish to take into account is that different
monitors use different DPI[3] or PPI[4] settings. What may look good on
your LCD monitor may not look as good on an 800X600 15 CRT monitor,

These references (below) are less authoritative than illustrative, but
among them you will probably find the compromise that suits your
demonstration page. Zen Garden designers before you have employed
various methods to constrain fonts on their pages, many examples may be
found in the CSS there. Because it is demonstrative one should consider
if the techniques used there are techniques that should be employed in
practical sites, which also perhaps gives you permission to use more
fixed methods there as it is for demonstration purposes.

[1] http://kb.iu.edu/data/aiwf.html
[2] http://www.netmechanic.com/news/vol2/html_no11.htm
[3] http://en.wikipedia.org/wiki/Dots_per_inch
[4] http://en.wikipedia.org/wiki/Pixels_per_inch
-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
css-discuss [EMAIL PROTECTED]
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] Font Sizes

[David Hucklesby]

On Tue, 8 Apr 2008 18:43:14 -0500, Alan Gutierrez wrote:
 I'm noticing that when I specify font sizes using em, they are slightly 
 smaller in
 Firefox than in Safari. This becomes a problem when the font sizes get 
 smaller. In
 Safari they are the right size, but in Firefox they are almost illegible.

 I couldn't dig anything up on Google, probably searching with the wrong 
 terms. Could
 anyone point me to a discussion of or article on this particular quirk?


Yes. I have noticed that, even using carefully calculated EMs or percents,
there are differences between browsers. But this is usually only by one
pixel, and seems to be due to (1) the number of decimal places a browser
actually uses, and (2) how a particular browser rounds the calculated
resulting font-size to come up with a whole number of pixels.

This is also affected by a number of other factors, of which only the
font-size on the outermost container is under a designer's control.
While the size also depends on the actual fonts available on a visitor's
machine, you can mitigate somewhat by selecting a list of fonts of
comparable size. Avoid, for example, using Verdana with Arial.

For this and other reasons, I suggest you use a base font-size of 100%.
(By base font-size I mean that specified on, say, the HTML selector,
although you can also defer this to a container further in.)

I also recommend you use nothing smaller than 75%, and that only for
copyright notice, document date, or such.

Michael Adams already sent you some useful additional information.
Hopefully these help.

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
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] Font Sizes

[Felix Miata]

On 2008/04/14 19:52 (GMT-0700) David Hucklesby apparently typed:

 On Tue, 8 Apr 2008 18:43:14 -0500, Alan Gutierrez wrote:

 I'm noticing that when I specify font sizes using em, they are slightly
 smaller in Firefox than in Safari. This becomes a problem when the font
 sizes get smaller. In Safari they are the right size, but in Firefox
 they are almost illegible.

 Yes. I have noticed that, even using carefully calculated EMs or percents,
  there are differences between browsers. But this is usually only by one 
 pixel, and seems to be due to (1) the number of decimal places a browser 
 actually uses, and (2) how a particular browser rounds the calculated 
 resulting font-size to come up with a whole number of pixels.

Browser rounding differs not only by browser, but also by platform. Now that
Safari exists on both doz and Mac, one must be specific discussing what
Safari does. Safari (v3.x) seems to round on doz identically to FF, while
on Mac noticeably not identical: http://fm.no-ip.com/SS/Fnt/rounding-SS.html

Hopefully this FF difference will disappear in FF3, but not having a new
enough OS X version to run FF3, I can't test for any difference.
-- 
Either the constitution controls the judges, or the
judges rewrite the constitution. Judge Robert Bork

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [EMAIL PROTECTED]
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-d] Font Sizes

[Alan Gutierrez]

I'm noticing that when I specify font sizes using em, they are  
slightly smaller in Firefox than in Safari. This becomes a problem  
when the font sizes get smaller. In Safari they are the right size,  
but in Firefox they are almost illegible.

I couldn't dig anything up on Google, probably searching with the  
wrong terms. Could anyone point me to a discussion of or article on  
this particular quirk?

--
Alan Gutierrez | [EMAIL PROTECTED] | http://blogometer.com/ | 504  
717 1428
Think New Orleans | http://thinknola.com/


__
css-discuss [EMAIL PROTECTED]
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/