Character units
This one is fairly new to me. Character units (CH) are fairly niche and typically used to set the width of paragraphs to help improve legibility and create content that is comfortable to consume and easy to scan.
A single character unit width: 1ch
should result in a paragraph where every character is placed on a new line– and it does. Although in reality, the ch
unit isn’t really counting characters, but instead estimating the number of characters per line, by taking the width of the zero character in any given typeface and multiplying it by the value we provide.
WCAG Accessibility guidelines suggest a maximum of 80 characters/glyphs per line and 40 characters per line for CJK glyphs. I would even suggest this is high — looking at this article we are reading around 70 characters per line. You can read more on legibility, here.
Fractional units (FR)
Earlier I spoke about percentages and, specifically, how in reality they are a bit of a pain in the arse to use.
Say we want to create a layout, based on an 8 column grid. There are two panels; the main content area that fills 5 of the 8 columns and a side panel that fills the remaining 3. To use percentages, we must manually calculate 5/8
and 3/8
.
.main-area { width: 62.5% }
.sidebar { width: 37.5% }
Every time we add a new panel, we must go back and recalculate each of these values to redistribute the space available. Oy vey!
// Using Percentages
.main-area { width: 50% }
.sidebar { width: 25% }
.new-panel { width: 25% }
Fractional units, here, are our savior. Quite simply, they are used as part of the wrapping (parent) container to define the segmentation of the interior space. Here is a quick example using the CSS grid framework:
- One element of width
1fr
will span the full width of a container - Two elements of width
1fr
will share the space equally - Two elements, one of width
1fr
and the other of2fr
will receive1/3
and2/3
of the space, respectively
Put simply, we use fr
to define the top number of the fraction. The bottom number of the fraction is found by adding together each of those values.
// Using Fractional units, with two panels .wrapper { display: grid; grid-template-columns: 5fr 3fr; }// Using Fractional units, changing to three panels .wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; }
As you can see in the example above, the fractional units have made it incredibly simple to expand and adapt our layout to fit our new requirements.
As someone who has closely followed the evolution of the internet, I’m so encouraged by the tools and technologies we have available to us today.
I’ve always believed that the best designs are those that really take into account the tools and technologies that enable them. If you are new to the world of engineering, I really hope that this article will inspire you to design ever-more immersive experiences with the confidence that CSS has your back!