Percentages make sense to me for sizing, but

If I use %’s when setting element sizes and placement on a page, is it ok to mix and match percentages with px’s, rem’s, em’s? Or, should I stick to only one type of size measurement? I would THINK percentages make the most sense because I never know how large someone else’s viewport/screen size is that they would be viewing my created webpage on. Then if they’d resize their viewport, the sizes would scale automatically if percentages were used. Of note: I know about responsive design and that’s where to incorporate handheld screen size layouts, but, I haven’t ever coded sites with responsive. I’m not ready to tackle that just yet

Hey Eric,

Oof where do I begin…

The type of units you like to use for size is up to you, it totally depends on what outcome you have in mind. Mixing units is ok and often used.

Do you want text to be the leading factor in design? Do you want the viewport to be the leading factor? Do I want a mix of those two? Do I want a website to be responsive or not? Those are questions you have to ask yourself.

Viewport leading:

The types of displays which are being used (which in turns determines the viewport size) is a huge factor in your choice of units. If you know a website will always only be shown on a 1024 x 768 screen there is no need to play with percentages or other relative units.

In case that your website is viewed on different viewport sizes I advise to use relative units however the type of unit you use for each element type may have different results.

For example:
Using % for width and height is a great unit to make sure elements are sized according to the parent element. However once applied to font size this may affect its readability.

Say your browser has a standard font size of 16px which is then defined as 100%. If you have a div where you want a bigger font you will have to call for percentage higher then 100%, but the next child element inside this div will have that value’s size as its 100% default font size because the parent has a bigger font size. If that makes any sense. This may get to such an extend its quite confusing.

But subsequently using pixels for font size may give different results as well. If a screen is small in cm but actually has a big screen resolution (such as smartphones) a text might be too small to read.

To cope with these sizing issues they came up with a unit called rem which is relative to font-size of the root element. This makes sure a text is always sized according to the browsers default font size and you can assume its readable on each device.

This does not mean you can’t use rem for width and height, padding and margin. Using rem can be perfectly used if you want all those attributes have values relative to the font size. a.k.a. Font leading.

Anyways, which type you use is entirely up to you and mixing is ok. I suggest playing with them to get a feeling for them. And don’t just limit yourself to the ones you mentioned. For a list of static and relative units please go here.

Hope this sheds some light,

Kind regards,
Jannes

PS: Also, don’t forget that a way to deal with different viewport sizes is the use of @media queries.

1 Like

Your statement: “Say your browser has a standard font size of 16px which is then defined as 100%. If you have a div where you want a bigger font you will have to call for percentage higher then 100%, but the next child element inside this div will have that value’s size as its 100% default font size because the parent has a bigger font size. If that makes any sense. This may get to such an extend its quite confusing.”

That did make sense. It eventually would come to a % of a % and then a % of THAT percentage, etc. which can get confusing to code with. I’d then wind up needing to write unusual percentage sizes than I normally would BECAUSE of the parent/child/inheritance relationship. I fully understand what you mean, lol.

I think for me the use of percentages is best used on keeping the placement location of items on the page (NOT the actual words that are read or clicked upon) in consistent distance, depending on the size of a viewport. Then, the actual letters on a page would probably be best to use rem’s, as they would scale in size as the viewport is enlarged or shrunken

1 Like

To see an example of how percentage can take on weird behavior, construct a nested list…

<ol>
  <li>item</li>
  <li><ol>
    <li>nested</li>
    <li><ol>
      <li>nest nested</li>
      <li>nest nested</li>
    </ol></li>
    <li>nested</li>
  </ol></li>
  <li>item</li>
</ol>

CSS

body {
    font-size: 100%;
}
ol {
    font-size: 85%;
}

One thing I usually don’t mess with is height unless I’m sure it will fit into the view port. It defaults to auto and stretches to fit content. If we want a fixed height, then use a fixed unit or ems that scale with the text. On the off chance text might overflow, an overflow: scroll property helps deal with that, and keeps the height fixed.

1 Like