It’s a phrase that every web designer hears all the time and, yet, it is nonsense.
It’s easy to produce a pixel perfect website – whether it has been passed to you by a designer or you do it yourself. Pixels, like millimetres, are a simple, non-responsive measurement that has no relationship to the screen on which it is viewed. Look up ‘website font size’ on any search engine and you will find dozens of articles on how 16pt is the perfect size and yet, that ignores the:
Take away: Stop using pixels.
Why?
In web design, font size, unless it is changed by the web designer defaults to the Body font size. This is part of the cascading process websites use to determine its design. Unless you decide that a font should be a different size, then that’s what it will be.
Of course, you, the web designer, have complete control over this and you can breeze through the various breakpoints (screen sizes) and decide whether the default body size is right or wrong for each one. But this is daft approach. On that basis you need to alter the font size for every screen from 3” to 27”.
You might argue that having 24 breakpoints is ridiculous and it is perfectly fine to compromise and have far fewer – and you’d be right. The problem is: what’s the point of having to change the actual size of the font when there are excellent alternatives – like the use of Vertical Width (VW) or percentages. Here the font will automatically resize according to the size of the screen it is viewed on.
Take away: don’t fix your font sizes in pixels, use percentage of the Body font size – REM.
More rubbish.
Whilst a designer or web designer controls the look and feel of the website, it is important to allow the user to view your site in any way they like – using their device, browser and version of choice. Whether we like it or not, they will view your website differently from the way you view it.
There is a further issue. Any website visitor can adjust their browser to view the site at any size they like – it’s called Zoom – that’s the general website size or font size. If the font size you as the designer choose is fixed, then the reader cannot change it. This means the website does not provide the perfect experience to the viewer.
Take away: Any modern website should reflect the requirements of the viewer. Use REM as your Body font size.
Not true.
Imagine the above situation: you have designed a box 500 pixels deep which contains text which can be altered by the viewer. If the viewer decides he should be able to view the 14 pt text as 18 pt, then the text will either flow over the box or simply stop depending on your settings.
Take away: elements must be flexible enough to reflect screen, browser and user settings.
Rubbish.
As with font and element size you need to go with the flow. The best way to do this is to use REM for all measurements – except height, leave this to expand or shrink according to its contents – ie Auto.
Take away: Don’t use pixels for sizing, respect the viewer's preferences.
How can it be? The original design could be produced in Photoshop, Illustrator, Figma, or Adobe XD, all of which use fixed measurements for everything. (Check out the XD Wishlist chats, designers have been asking for this functionality for years.)
The trouble is fixed measurements are irrelevant for web design. Imagine a 960 pixel wide box. It would need to be reduced in size for smaller screens and increased for larger ones, why bother with all that if you could size it at 86%? The same for font sizes.
The usual way round this traditionally is to produce code that alters sizing per breakpoint, but, in a world of fast websites, why add unnecessary code? It slows the site down and the search engines won’t like it.
Measurements that relate to screen size
VW – Vertical Width – e.g. 1VW = 1% of the screen width
VH – Vertical Height – e.g. 1VH = 1% of the screen height
Vmin - %age of the smaller dimension
Vmax - %age of the larger dimension
Measurements that relate to their Containing Element
%age – as a font size, the %age of the default Body font size. As an element %age of the containing element – which could, of course be the Body
EM – applied to the containing element control the measurements inside it.
Measurements with no Relationships
Pixels, points, centimetres, inches, pica
Measurements that relate to browser settings
REM – relating to the Body or root element.
At this point, I have to make an admittance; my ex-wife said to me: “Hywel, you need to add ‘I think’ to the end of more of your sentences.” So, IMHO, this is my favourite way of doing things and why:
Websites aren’t paintings. They are not fixed. They are viewed on multiple devices and browsers and the same page looks different according to the browser and screen it is viewed on. If designers continue to design using fixed measurements, then there will always be a difference between their work and what appears on a website.
Even if a designer provides his work across a range of screen widths, (one of my designers does this) there are still dozens of variations that fall outside his carefully crafted work.
The solution is that website design should respect screen size – both in connection to elements and fonts.
How though?
Design systems rarely, if ever, allow this; measurements are in fixed sizes which then have to be translated by the web designer/developer into an inevitable compromise. This means the web designer has a choice:
- He/She translates the fixed sizes they are provided into screen-related measurements.
- He/She designs using no-code systems like Webflow – or a responsive design system – when they arrive.
(Sketch and Adobe XD are getting there.)
Until someone create a design system that supports responsiveness, then you are stuck with option 1, or designing using systems like Webflow.
One day.
