Photograph Works

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.

Discover more from Photograph Works

Subscribe to get the latest posts sent to your email.

Comments

6 responses to “REMs and EMs”

  1. Ms. Tassitus

    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 🙂

    Reply
    1. David Bennett

      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.

      Reply
      1. Ms. Tassitus

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

        Reply
  2. KokkieH

    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.

    Reply
    1. David Bennett

      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.

      Reply
      1. KokkieH

        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).

        Reply

Leave a Reply to Ms. TassitusCancel reply

More posts

Discover more from Photograph Works

Subscribe now to keep reading and get access to the full archive.

Continue reading