REMs and EMs

Website designers can set type absolutely or relatively. Absolute measurements don’t take into account the size of the browser viewing the web page. So text will be the same size on a phone as it is on a large screen. Relative sizes take into account the device on which they are being viewed.

Assuming a designer wants to make the type relative – to what should it be relative? I have been setting font size with ’em’ for a while.

But a couple of days ago I came across the ‘rem’. I came across it when I changed the font for block quotes in the Make theme from The Theme Foundry.

As an aside, the Make theme is free and there’s a child theme on The Theme Foundry site. I like using child themes so that any changes are not overridden on an update.

Also on self-hosted sites you can ‘install’ a ‘custom CSS file by using Jetpack. Either way, you can make changes at will and that’s what I wanted to do. I thought the font for blockquotes was too big, so I used Firebug in Firefox to track down the setting. And that’s where I saw that the font was 2.4 rem.

Rem?

This article Confused About REM and EM? explains it. In a nutshell, em is relative to the font size of its direct or nearest parent and so on in a series of steps from the base font size, while rem is only relative to the base font-size and jumps the intermediate parents and grandparents.

There’s a link in the article to Type Scale. If you like messing about with type, take a look.

6 Comments

  1. Ms. Tassitus says:

    I do remember seeing REM somewhere, but didn’t bother finding out what it meant. It’s been some time since I dealt with any of this, even though I have kept one self-hosted for the ‘messing around’ purpose.

    Started once with the Make theme, but that must have been in a phase when I was less patient 🙂

    Like

    1. If I remember correctly, when ‘Make’ came out a lot of the features were in the paid ‘Make Plus’ plugin. The latest version of the free theme has typography and colour options available in the customiser, it is a bit more attractive as a proposition.

      Like

      1. Ms. Tassitus says:

        Yes! I think that was what turned me off. Will take a look at it again, next time I’m in the mood 🙂

        Like

  2. KokkieH says:

    I’ve been using the new vmin unite for font size in the projects I’m working on for my web development course. What makes that unit nice is that it automatically adjusts the font-size based on screen size, so you don’t need to specify alternative font-sizes for smaller screens. It doesn’t offer the control that em and rem does, though.

    Like

    1. min – ooh, another one learn about. I looked at the course you mentioned before but got overloaded with other stuff and didn’t start. There seemed to be a lot of options and I got stymied by so much choice.

      Like

      1. KokkieH says:

        It’s vmin. The v stands for viewport – the unit sizes elements relative to the width or height (whichever’s smaller) of the screen. There’s also vmax, vh(eight) and vw(idth).

        Like

Leave a Reply to KokkieH Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.