[Pro] Using rems as font units

Freeway
1

After a little curiosity got the better of me, I’ve had a go at using the rem (root em) as a unit for specifying type sizes.

This page got me going:

I’ll let the page do the explaining, the more interesting part for me, was getting it to work in Freeway.

Step 1. Page menu → Html Markup… → After html:

html { font-size: 62.5%; } }

Step 2. In the Freeway ‘body’ style, use the extended attributes and add the following:

Name: font-size
Value: 16px; 1.6rem

Step 3. Size all the styles required, using the method in step 2

It seems to give consistent results across browsers, with the minor disadvantage that older versions of IE are forced to use the pixel value, and therefore the browser can’t resize the type. The big advantage, for me, is that sizing type becomes relatively easy, with none of the complications of using ems and sizes compounding.

Now, it could be that the method outlined above is frowned on — I’ve no idea — but it seems to work. An example is given in the link.

http://www.communique-test.co.uk/JEA/

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Incidentally, I forgot to mention that you can still enter a pixel size for fonts in the usual ‘Character’ attributes section where you would normally change your style sheets. This information gets ignored on output, but is used by Freeway for screen output, keeping everything looking correct on screen.

The above has only been tested on Freeway Pro version 6.1.2.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Ian
Yep I agree it makes it very easy to do the maths.
Also remember you aren’t restricted to font size only. You can use rems on line height as well and if you use a polyfill for i.e. 8 then you don’t need to add the px with the rem unit
You can find the polyfill here:

all the best max

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

This doesn’t look correct to me. When Freeway processes this, it will write:

body { font-size: 16px; 1.6rem }

If you wanted to set the body tag to 1.6 rem, you would need this to read:

body { font-size: 1.6rem }

In the first example, the resulting style rule for the body is invalid, because it only contains one pair (key/value separated by a colon) followed by a single value without key. It’s up to the browser whether to ignore the entire rule, or just the last (mangled) pair. That’s why we aim for valid, by the way. It’s not out of some misplaced sense of duty, but because it’s unambiguous. IE can’t stick its fingers in its (virtual) ears and say, La la la, I can’t hear you!

Walter

On Dec 12, 2013, at 9:44 AM, Ian Halstead wrote:

Name: font-size
Value: 16px; 1.6rem

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Walter beat me to the punch, and he is absolutely right about your CSS
being malformed.

The best way to do this - especially if you are setting up for browser
fallbacks, is to extend your code in Freeway Pro like so:

Name:  font-size
Value:  16px; font-size:1.6rem

Which FWP will output in the correct cascade so that older browsers who
don’t know rems will simply run with the px.

body { font-size:16px; font-size:1.6rem; }

Because the rem font-size comes last, browsers who “get” what those are
will use them. Once you see how FWP will accept all this, anytime you want
to write properties in a particular sequence, you can add them to the
Value end of things, remembering to use the appropriate colon and
semi-colon to separate them. FWP automatically adds the final semi-colon
(except in certain circumstances where that property comes at the end of a
style rule, but that is for another conversation :slight_smile:

Best wishes…

Ernie Simpson, aka The Big Erns

On Thu, Dec 12, 2013 at 10:35 AM, Walter Lee Davis email@hiddenwrote:

This doesn’t look correct to me. When Freeway processes this, it will
write:

    body { font-size: 16px; 1.6rem }

If you wanted to set the body tag to 1.6 rem, you would need this to read:

    body { font-size: 1.6rem }

In the first example, the resulting style rule for the body is invalid,
because it only contains one pair (key/value separated by a colon) followed
by a single value without key. It’s up to the browser whether to ignore the
entire rule, or just the last (mangled) pair. That’s why we aim for valid,
by the way. It’s not out of some misplaced sense of duty, but because it’s
unambiguous. IE can’t stick its fingers in its (virtual) ears and say, La
la la, I can’t hear you!

Walter

On Dec 12, 2013, at 9:44 AM, Ian Halstead wrote:

Name: font-size
Value: 16px; 1.6rem

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Got it… not being used to handling CSS makes for a lot of trial and error. In that case error!

Thanks guys, it now makes sense. I’ve always learned best by burning the odd finger.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Fwiw, I think you’re doing fine Ian… I’m glad you were excited enough to
try rems and to share your results. I’ll be interested to see what happens
next :slight_smile:

–
Ernie Simpson

On Thu, Dec 12, 2013 at 11:09 AM, Ian Halstead email@hidden wrote:

Got it… not being used to handling CSS makes for a lot of trial and
error. In that case error!

Thanks guys, it now makes sense. I’ve always learned best by burning the
odd finger.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

I found this thread very interesting. One of the reasons I gave up on ems was because of the compounding problem indicated in the article Ian posted a link to. This was especially problematic when using Perch CMS, which uses a combination of percentages and pixels in their embedded code. It sounds like rems are a better, more predictable option.

Walter/Ernie, I’m pretty sure you both use ems for your website designs. What’s your take on rems? Is this something you’re both sold on or do you still prefer ems and why?

K

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Mixing units is not inherently bad but it does take some work to understand how it all interacts. I recently switched to rem for type (I was using %), em for things like margin/padding and % for structural elements and it works great.

Todd

This was especially problematic when using Perch CMS, which uses a combination of percentages and pixels in their embedded code.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

I started using em units back when I first read about it in the epic tome
Bulletproof Web Design by Dan Cederholm. My desire was to explore
flexible alternatives to fixed measurements. Lately I have also added %
units to elements like the small element, and sometimes other type
elements like blockquote or menu lists. I’m still interested in scaling
relationships.

Rems are a recent thing for me, borne mostly from a need to resolve
compound percentages. I like them, and may use them more… as long as you
can calculate the effect, they all have their use and good browser support.

–
Ernie Simpson

On Thu, Dec 12, 2013 at 7:27 PM, RavenManiac email@hidden wrote:

I found this thread very interesting. One of the reasons I gave up on ems
was because of the compounding problem indicated in the article Ian posted
a link to. This was especially problematic when using Perch CMS, which uses
a combination of percentages and pixels in their embedded code. It sounds
like rems are a better, more predictable option.

Walter/Ernie, I’m pretty sure you both use ems for your website designs.
What’s your take on rems? Is this something you’re both sold on or do you
still prefer ems and why?

K

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

On 12 Dec 2013, 11:50 pm, Todd wrote:

Mixing units is not inherently bad but it does take some work to understand how it all interacts. I recently switched to rem for type (I was using %), em for things like margin/padding and % for structural elements and it works great.

Todd
http://xiiro.com

Why not use the same unit for everything?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

This article explains the “why” http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style/. Of course it’s just an opinion, not an absolute, but it does make sense in many ways. Though I’ve recently found some quirks when using em for margins (perhaps due to problems with my design) but I’m still investigating. Still, in general I’ve found it has helped my design and CSS so far.

Todd

Why not use the same unit for everything?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Why not use the same unit for everything?

Because you may want different behavior. Generally speaking, this is how I use the different units:

  • Rem. This is the unit I default to for text. I used to use ems instead, but got fed up with the whole inheritance thing (if a div had the text size set to 1.5em, and a child span had it’s font size set to 2em, it would actually equal 1.5 * 2). Rems are set to be relative to the root element on the page, which is the <html> tag. This is super awesome in responsive designs, because it means that you can shrink all the font-sizes across your website in one line of CSS for mobile devices:

      html { font-size: 80%; }

    That one line will shrink all the text on a webpage to 80% of their initial size, given that you sized the text using rems.

  • Em. I don’t use this unit of measurement all that much. However, it does come in handy when you need the dimensions of something to be relative to the font-size of it’s parent. For example, browsers automatically apply a top and bottom margin of 1em to the <p> element. If you were to set the font size of <p> to be 16px, there would be a 16px top and bottom margin applied to it. It’s very useful when you are creating vertical rhythm with text.

  • Px. Now, here is a measurement that I rarely ever use except when I need to create a thin line or border. Essentially, I only use it when I need a measurement of 1px.

  • %. I tend to reserve percentages for block-level (div-like) layout purposes. Basically, if I want a size to be relative to the width of it’s parent element, I reach for a percentage value.

Each measurement type has a very valid and important usage (especially when you are dealing with responsive websites). Each of them bring a very specific set of quirks and benefits to the table. In the end, you should use whichever one will keep you from having to write more CSS. In theory, you could create a responsive website where every single value is declared in a pixel value, you would just have to write a breakpoint for every single pixel amount incrementally and rewrite almost every single CSS rule in each breakpoint, changing the width of a div from 114px to 113px to 112px and so on. Would it be responsive? Yes. Would it be the best way? Not at all.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Good info. Thanks Caleb.

I’m really intrigued by rems, which, as you indicated, solves the inheritance problem with ems. However, some browsers don’t support ems. I understand that browsers read code from right to left. So how would you extend the code to accommodate older browsers, which may not be rem compatible?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

Oops! Ernie answered that questions above. My bad. This is how:

Name:  font-size
Value:  16px; font-size:1.6rem

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

I don’t think that CSS will validate. This is what you want to use:

font-size: 16px;
font-size: 1.6rem;

Now, keep in mind that rems are relative to the document root (the <html> tag). By default, most browsers set that to be 16px. Hence, 1.6rem ≠ 16px (it would be more like 25px).

To make the math easier while using rems, a lot of front end developers begin by setting the font-size of the <html> tag to 62.5%. Because 62.5% of 16 = 10, that simple hack will cause 1rem to equal 10px, 1.5rem to equal 15px, and so on.

However, I’m not convinced that is the best way. The problem that if you have some text that is unstyled (outside of the styles that are applied to that <html> tag) it will default to 1rem - which equals 10px - in size, which is pretty unusable.

If you are using Sass, I’ve created this little mixin that will allow you to declare the font-size in a easy manner (1.5 = 15px), do the math to calculate the correct rem value, and write the pixel fallback for IE8 and the like.

If you aren’t using Sass, give this CSS a try:

html { font-size: 62.5%; }
body { font-size: 160%; }

Because the rem is relative to the <html> tag, 1rem would equal 10px. This makes the math easy. However, if some text is unstyled, it will inherit the font-size of the <body> tag. 160% of 62.5% will put you right back at the browser’s default font-size (which, as I said, is usually 16px).

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

Mr. Grove, you have missed the obvious :wink:

The example quoted is not CSS, but instructions for how to create the
extended property in Freeway Pro’s styles AND force FWP to write them in
the correct cascade order. Thus creating FWP’s less pretty but absolutely
valid CSS.

On Monday, December 16, 2013, Caleb Grove email@hidden wrote:

I don’t think that CSS will validate. This is what you want to use:

font-size: 16px;
font-size: 1.6rem;

–

–
Ernie Simpson

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

As they say, I missed the frog in boiling water for the trees, or something like that. ;D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options