New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Em or REM? #9

Closed
pixeline opened this Issue Feb 14, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@pixeline

Hi, awesome tool, thank you!

Question: isn't it time to switch to rem units instead of em ? I find it so much easier to predict when all elements share the same reference value.
Or make it an option?

@jeremychurch

This comment has been minimized.

Show comment
Hide comment
@jeremychurch

jeremychurch Feb 14, 2017

Owner

It's hard to say if any one single unit (px, em, rem, percent) is better than the others. I think they all have their place depending on the use case, project, and of course personal preference.

That said, the scale is based on percents, just like em and rem units, so the rem value is the same as the displayed em value.

Here's an example:
If the HTML element is set to 1em (16px), then:
17px = 106.3% = 1.063 em = 1.063 rem

Here's an example where I could argue using em units is the better approach. If I want to scale an entire sidebar or widget to a smaller size, then by using em units I can just change the font-size instead of changing all the values for fonts, margins, padding, etc.
http://codepen.io/jeremychurch/pen/egxxvx

Here's that same example using rem units. You'll notice that the h2 doesn't inherit the font-size, nor does it affect the padding or margins, so I would have to declare all of that again for my small widget, vs just changing the font-size.
http://codepen.io/jeremychurch/pen/KaJJae

Anyways. I do appreciate the feedback, and it's been a while since I've looked at this project. The text at the bottom might be due for a refresh, and maybe I can incorporate some of this into it; information explaining units, how it can be used for rems, etc.

Owner

jeremychurch commented Feb 14, 2017

It's hard to say if any one single unit (px, em, rem, percent) is better than the others. I think they all have their place depending on the use case, project, and of course personal preference.

That said, the scale is based on percents, just like em and rem units, so the rem value is the same as the displayed em value.

Here's an example:
If the HTML element is set to 1em (16px), then:
17px = 106.3% = 1.063 em = 1.063 rem

Here's an example where I could argue using em units is the better approach. If I want to scale an entire sidebar or widget to a smaller size, then by using em units I can just change the font-size instead of changing all the values for fonts, margins, padding, etc.
http://codepen.io/jeremychurch/pen/egxxvx

Here's that same example using rem units. You'll notice that the h2 doesn't inherit the font-size, nor does it affect the padding or margins, so I would have to declare all of that again for my small widget, vs just changing the font-size.
http://codepen.io/jeremychurch/pen/KaJJae

Anyways. I do appreciate the feedback, and it's been a while since I've looked at this project. The text at the bottom might be due for a refresh, and maybe I can incorporate some of this into it; information explaining units, how it can be used for rems, etc.

@pixeline

This comment has been minimized.

Show comment
Hide comment
@pixeline

pixeline Feb 14, 2017

Ah, thanks for the use case where em are indeed useful. An option to set the unit would indeed be more relevant than my initial suggestion.

I did something quite nice (but unorthodox) thanks to your tool: a typographic scale for mobile, and one for 1024px and above. I'm still fidgeting with it, but in case you want examples: http://plancomptablebelge.be
(it's a free tool for accountants in Belgium).
i plan to write a case study where i'll credit Type Scale.

Thank you!
A.

Ah, thanks for the use case where em are indeed useful. An option to set the unit would indeed be more relevant than my initial suggestion.

I did something quite nice (but unorthodox) thanks to your tool: a typographic scale for mobile, and one for 1024px and above. I'm still fidgeting with it, but in case you want examples: http://plancomptablebelge.be
(it's a free tool for accountants in Belgium).
i plan to write a case study where i'll credit Type Scale.

Thank you!
A.

@jeremychurch

This comment has been minimized.

Show comment
Hide comment
@jeremychurch

jeremychurch Feb 14, 2017

Owner

This looks really nice. I'll have to look at it closer sometime. Keep me posted on the case study; sounds interesting.

Owner

jeremychurch commented Feb 14, 2017

This looks really nice. I'll have to look at it closer sometime. Keep me posted on the case study; sounds interesting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment