How to normalise ’em’ font

Commenting Code

I was thinking about how we use the font measurement ’em’ and how it can be very hard to keep track of the relative sizes. When you keep driving down in sizes for different widgets it can be hard to know what size your font is going to come out like.

This would be more focused to the CMS systems with modules you can plug in at various places. For example a CMS systems I have worked with Kentico, you can build modules that can then be place in various location by the CMS management. This is where it comes tricky because you don’t know what ’em’ or font size will be surrounding the module that is placed.

So the idea I use is to normalise the font size. ’em’ is a size of the parents font size, so how it is normally used and works, is you have a master font size on the body then variations throughout the code using ’em’. This is still how you should start for all the parts that are not a module, but for the module you can add its own master font-size.

If you give the module its own master font-size of say 16px, then all the fonts within the module will be relative to the modules master font and not relative to the font above the module itself.

Please look at my example on Code Pen.

There is also a interesting and close to my premise blog post by CSS Tricks about using ‘rem’ as the measurements.

His idea is to use the ‘px’ to size the whole document level, which makes it easier for big changes. Then use ‘rem’ on each module. ‘rem’ will then use the root size from the document level and not the parent. With that you can use the ’em’ within the modules to then size them according to the parent ‘rem’ size.

I think this is an amazing idea, but still a lot of maths and thought when you get to bigger pages. Check it out on CSS CSS Trick website here.

Published by Chris Pateman - PR Coder

A Digital Technical Lead, constantly learning and sharing the knowledge journey.

Leave a message please

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

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

Twitter picture

You are commenting using your Twitter 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.

%d bloggers like this: