Using rem in font-size

With most browsers users can zoom in if the text is too small to read, but from a developer perspective it could be wise to make the text more scalable by using ‘rem’ in stead of ‘px’.
‘rem’ is not supported on IE8 and below, but who cares nowadays …

So in the css-file it looks like this (in this case using pixels as a fallback):

html {
  font-size: 62.5%; /* sets the base font to 10px for easier math */
}

body {
  font-size: 16px;
  font-size: 1.6rem;  
  /* sets the default sizing to make sure nothing is actually 10px */
}

h1 {
  font-size: 32px;
  font-size: 3.2rem;
}

Scale up for small screens is as easy as:

@media screen and (max-width: 649px) {
  html {
    font-size: 100%;
  }
}

Most used size-units:
px = absoluut = 1 “viewport pixel”
pt = absoluut = 1 point is 1/72 of an inch
% = relative = relative to the parent element’s font size
em = relative = relative to the parent element’s font size
rem = relative = (root em) Relative to the html font size
vw = relative = 1/100th of the width of the viewport
vh = relative = 1/100th of the height of the viewport
vmin = relative = 1/100th of the viewport’s smaller dimension (height or width)
vmax = relative = 1/100th of the viewport’s larger dimension (height or width)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

© 2020 Jakob Helmer - Powered by WordPress - @trails&tribulations