Quantcast

Font-sizes & EM

classic Classic list List threaded Threaded
14 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]>:

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 [[hidden email]]
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Font-sizes & EM

Tom Livingston
In reply to this post by Crest Christopher
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 <
[hidden email]> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Font-sizes & EM

Crest Christopher
In reply to this post by Rainer Berthold
Based on what I read in the article; EM are always double in VW ?


> Rainer Berthold <mailto:[hidden email]>
> Sunday, March 19, 2017 2:12 AMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_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
> <[hidden email]>:
>
> 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 [[hidden email]]
> 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 <mailto:[hidden email]>
> Saturday, March 18, 2017 11:45 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <[hidden email]>:

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


> Rainer Berthold <mailto:[hidden email]>
> Sunday, March 19, 2017 2:12 AMvia Postbox <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_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 <[hidden email]>:
>
> 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 [[hidden email]]
> 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 <mailto:[hidden email]>
> Saturday, March 18, 2017 11:45 PMvia Postbox <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_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 [[hidden email]]
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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Font-sizes & EM

Crest Christopher
If understood correctly based on the article Rainer posted.

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

> Rainer Berthold <mailto:[hidden email]>
> Sunday, March 19, 2017 2:39 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> Sorry, can’t follow. Tom’s post may help.
>
> Best, Rainer
>
>
> Am 19.03.2017 um 16:03 schrieb Crest Christopher
> <[hidden email]>:
>
> Based on what I read in the article; EM are always double in VW ?
>
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
> 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 <mailto:[hidden email]>
> Sunday, March 19, 2017 11:03 AMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> Based on what I read in the article; EM are always double in VW ?
>
>
>
> Rainer Berthold <mailto:[hidden email]>
> Sunday, March 19, 2017 2:12 AMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_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
> <[hidden email]>:
>
> 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 [[hidden email]]
> 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 <mailto:[hidden email]>
> Saturday, March 18, 2017 11:45 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <
[hidden email]> wrote:

> If understood correctly based on the article Rainer posted.
>
> 1em = 2vw, 4em = 8vw etc ?
>
> Rainer Berthold <mailto:[hidden email]>
>> Sunday, March 19, 2017 2:39 PMvia Postbox <https://www.postbox-inc.com/?
>> utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>>
>

--

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


#663399
______________________________________________________________________
css-discuss [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Font-sizes & EM

Crest Christopher
What is 1vw, a pixel ?

> Tom Livingston <mailto:[hidden email]>
> Sunday, March 19, 2017 7:39 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> 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 <mailto:[hidden email]>
> Sunday, March 19, 2017 6:30 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> If understood correctly based on the article Rainer posted.
>
> 1em = 2vw, 4em = 8vw etc ?
>
>
> Rainer Berthold <mailto:[hidden email]>
> Sunday, March 19, 2017 2:39 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> Sorry, can’t follow. Tom’s post may help.
>
> Best, Rainer
>
>
> Am 19.03.2017 um 16:03 schrieb Crest Christopher
> <[hidden email]>:
>
> Based on what I read in the article; EM are always double in VW ?
>
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
> 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 <mailto:[hidden email]>
> Sunday, March 19, 2017 11:03 AMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> Based on what I read in the article; EM are always double in VW ?
>
>
>
> Rainer Berthold <mailto:[hidden email]>
> Sunday, March 19, 2017 2:12 AMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_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
> <[hidden email]>:
>
> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <
[hidden email]> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <mailto:[hidden email]>
> Sunday, March 19, 2017 7:52 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> 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
> <http://medialogic.com>
>
>
> #663399
> Crest Christopher <mailto:[hidden email]>
> Sunday, March 19, 2017 7:45 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> What is 1vw, a pixel ?
>
>
> Tom Livingston <mailto:[hidden email]>
> Sunday, March 19, 2017 7:39 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> 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 <mailto:[hidden email]>
> Sunday, March 19, 2017 6:30 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> If understood correctly based on the article Rainer posted.
>
> 1em = 2vw, 4em = 8vw etc ?
>
>
> Rainer Berthold <mailto:[hidden email]>
> Sunday, March 19, 2017 2:39 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> Sorry, can’t follow. Tom’s post may help.
>
> Best, Rainer
>
>
> Am 19.03.2017 um 16:03 schrieb Crest Christopher
> <[hidden email]>:
>
> Based on what I read in the article; EM are always double in VW ?
>
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <
[hidden email]> wrote:

> Therefore, if the viewport width is 800px = 8% of viewport width; if I'm
> doing the math right ?
>
> Tom Livingston <[hidden email]>
> Sunday, March 19, 2017 7:52 PM via Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> 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 <[hidden email]>
> Sunday, March 19, 2017 7:45 PM via Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> What is 1vw, a pixel ?
>
>
> Tom Livingston <[hidden email]>
> Sunday, March 19, 2017 7:39 PM via Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> 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 <[hidden email]>
> Sunday, March 19, 2017 6:30 PM via Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> If understood correctly based on the article Rainer posted.
>
> 1em = 2vw, 4em = 8vw etc ?
>
>
> Rainer Berthold <[hidden email]>
> Sunday, March 19, 2017 2:39 PM via Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> Sorry, can’t follow. Tom’s post may help.
>
> Best, Rainer
>
>
> Am 19.03.2017 um 16:03 schrieb Crest Christopher
> <[hidden email]> <[hidden email]>:
>
> Based on what I read in the article; EM are always double in VW ?
>
>
>
> ______________________________________________________________________
> css-discuss [[hidden email]]
> 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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Font-sizes & EM

olegk65@gmail.com
In reply to this post by Crest Christopher
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 <p> to 2em, the actual font size will be 2vw (base font size you
set) x 2em (the font size you set for <p> element), which will result to 68
pixels.

On Sun, Mar 19, 2017 at 3:30 PM, Crest Christopher <
[hidden email]> wrote:

> If understood correctly based on the article Rainer posted.
>
> 1em = 2vw, 4em = 8vw etc ?
>
> Rainer Berthold <mailto:[hidden email]>
>> Sunday, March 19, 2017 2:39 PMvia Postbox <https://www.postbox-inc.com/?
>> utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> Sorry, can’t follow. Tom’s post may help.
>>
>> Best, Rainer
>>
>>
>> Am 19.03.2017 um 16:03 schrieb Crest Christopher <
>> [hidden email]>:
>>
>> Based on what I read in the article; EM are always double in VW ?
>>
>>
>>
>> ______________________________________________________________________
>> css-discuss [[hidden email]]
>> 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 [[hidden email]]
>> 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 <mailto:[hidden email]>
>> Sunday, March 19, 2017 11:03 AMvia Postbox <https://www.postbox-inc.com/?
>> utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>>
>> Based on what I read in the article; EM are always double in VW ?
>>
>>
>>
>> Rainer Berthold <mailto:[hidden email]>
>> Sunday, March 19, 2017 2:12 AMvia Postbox <https://www.postbox-inc.com/?
>> utm_source=email&utm_medium=sumlink&utm_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 <
>> [hidden email]>:
>>
>> 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 [[hidden email]]
>> 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 <mailto:[hidden email]>
>> Saturday, March 18, 2017 11:45 PMvia Postbox <
>> https://www.postbox-inc.com/?utm_source=email&utm_medium=su
>> mlink&utm_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 [[hidden email]]
> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Font-sizes & EM

Tom Livingston
In reply to this post by 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 <[hidden email]> 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 <
> [hidden email]> wrote:
>
>> Therefore, if the viewport width is 800px = 8% of viewport width; if I'm
>> doing the math right ?
>>
>> Tom Livingston <[hidden email]>
>> Sunday, March 19, 2017 7:52 PM via Postbox
>> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> 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 <[hidden email]>
>> Sunday, March 19, 2017 7:45 PM via Postbox
>> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> What is 1vw, a pixel ?
>>
>>
>> Tom Livingston <[hidden email]>
>> Sunday, March 19, 2017 7:39 PM via Postbox
>> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> 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 <[hidden email]>
>> Sunday, March 19, 2017 6:30 PM via Postbox
>> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> If understood correctly based on the article Rainer posted.
>>
>> 1em = 2vw, 4em = 8vw etc ?
>>
>>
>> Rainer Berthold <[hidden email]>
>> Sunday, March 19, 2017 2:39 PM via Postbox
>> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
>> Sorry, can’t follow. Tom’s post may help.
>>
>> Best, Rainer
>>
>>
>> Am 19.03.2017 um 16:03 schrieb Crest Christopher
>> <[hidden email]> <[hidden email]>:
>>
>> Based on what I read in the article; EM are always double in VW ?
>>
>>
>>
>> ______________________________________________________________________
>> css-discuss [[hidden email]]
>> 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 [[hidden email]]
>> 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 [[hidden email]]
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/
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: 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 <mailto:[hidden email]>
> Sunday, March 19, 2017 8:13 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> 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 <mailto:[hidden email]>
> Sunday, March 19, 2017 8:04 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> 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 <mailto:[hidden email]>
> Sunday, March 19, 2017 7:52 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> 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
> <http://medialogic.com>
>
>
> #663399
> Crest Christopher <mailto:[hidden email]>
> Sunday, March 19, 2017 7:45 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> What is 1vw, a pixel ?
>
>
> Tom Livingston <mailto:[hidden email]>
> Sunday, March 19, 2017 7:39 PMvia Postbox
> <https://www.postbox-inc.com/?utm_source=email&utm_medium=sumlink&utm_campaign=reach>
> 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 [[hidden email]]
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/
Loading...