Why are REMs recommend for sizing text elements?

Within Splash, we give you three units of measure to choose from when styling text elements: pixels, EMs and, REMs.

When it comes to responsive design, it goes without saying that setting text-size in pixels should be avoided, but whether to use EMs or REMs is up for debate.

We'll spare you the intricacies of how these units two differ, but it's worth noting that REM stands for root em. Simply put, EMs are determined by the font size of the element on which they are being used and REMs are determined by the root font size specified for the entire page.

With that in mind, we recommend using REMs for text within Splash because doing so allows all type on the page to render consistently throughout the page because it's based on the same root value.

Toggling between EMs and REMs within the CMS may not seem to have much of a visual effect, but here's an example of how setting type in EMs can result in font sizes appearing inconsistently even though all text has the same font settings applied.

Screen_Recording_2020-01-22_at_04.08_PM.gif
Setting your type in REMs is a precaution that ensures proper type rendering no matter the circumstances or placement of the text on the page.

Screen_Recording_2020-01-22_at_04.15_PM.gif

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.