Did you know TNW Conference has a track fully dedicated to exploring new design trends this year?
Check out the full Sprint program here.
Since the dawn of web design, we have measured our websites in pixels.
A somewhat absolute measurement that describes the smallest visual unit of a screens resolution.
Ive developed a rather love-hate relationship with these little gremlins, certainly from an engineering point of view.
On the one hand, the pixel is a ubiquitous measurement that is easy to visualize.
On the other hand, theirabsolutenesscan work against us.
For web interfaces, we are talking aboutCSS.
you might read all about the foundations of CSS onW3C but I wont dive into that in this article.
Strangely, the world of design tools has been a little slow to catch up.
The common language now needs translation.
Percentage (%)
Percentages are the fundamentalrelativemeasurement.
A child ofwidth:100%will span the full width of the parent.
With a parent whose font size is16px, a child can obtain a14pxby setting its font size to87.5%.
As such, I rarely use this measurement but have included it for completeness.
The value we select is multiplied by that base value.
Like percentages, EMs are locked to their parent.
At first glance, this may seem a little odd, yes, but they are incredibly useful.
EMsare great for sizing UI elements (an icon for instance) with respect to adjacent text.
REMsare great for establishing harmony and consistency across typography and whitespace.
A root font-size of16pxand a standard white spacing value of0.5remestablishes an8pxgrid wow.
Furthermore, maintaining that consistency as your designs grow is simpler.
EMs are a little niche but very practical.
REMs are a staple that I use day in, day out.
This is most often the case when were creating immersive layouts that expand to fill portions of the screen.
CSS gives us two simple measures, the viewport width (VW) and its height (VH).
WCAG Accessibility guidelines suggest a maximum of 80 characters/glyphs per line and 40 characters per line forCJKglyphs.
I would even suggest this is high looking at this article we are reading around 70 characters per line.
you’ve got the option to read more on legibility,here.
Say we want to create a layout, based on an 8 column grid.
To use percentages, we must manually calculate5/8and3/8.
Fractional units, here, are our savior.
The bottom number of the fraction is found by adding together each of those values.
