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.
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.
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.
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.
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.
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.
How to make Client First fly
April 27, 2023
Client First is an excellent framework, but I have adapted it to fit my needs
Design a logo for free
August 26, 2022
Logo design costs. A lot. We show you how to create a logo for your business.
How I accidentally increased website visitors by 2.3 million %
October 11, 2021
When a little local initiative kicks off
Anatomy of a bad website
November 12, 2020
A website that doesn't provide an easy answer to visitors' questions isn't doing its job
How to build an effective website for yourself
September 10, 2020
Forget everything we’ve been told about web design; effectiveness is a whole new skill.
Great software to manage your small business
March 1, 2019
There's a huge choice - here's how we found our perfect system.
Should I use a Website Builder or a Web Designer?
February 2, 2019
Pay a professional or do it yourself?
Creating a website - before you start work
January 10, 2019
A website isn't just a collection of pretty pictures; it needs to attract visitors. Here's a brief guide.
Google Ads for Dummies
December 6, 2018
Here's a rundown of the pros and cons of using Google Ads for small businesses
How to optimise images for your website
August 14, 2018
We guide you through optimising images on your website.
10 free ways to promote your website for UK small businesses
July 5, 2018
A new website will never be seen unless you help, here's a few ideas to get you started.