Making the Gov.uk front end typography scale more accessible(designnotes.blog.gov.uk)
designnotes.blog.gov.uk
Making the Gov.uk front end typography scale more accessible
https://designnotes.blog.gov.uk/2022/12/12/making-the-gov-uk-frontend-typography-scale-more-accessible/
47 comments
I like the work that Gov UK do in terms of accessibility, changes they make, and how they explain it. Not just from a compliance point of view, but a lot of thought goes into their design too. The first time I had to file my taxes (HMRC site), I was terrified, but their site guided me through the process, with clear divisions, sections, guidance along the way. In all of this their design decisions really shines, and it makes a lot of sense; dealing with legalese and paperwork is daunting, the last thing a user should be doing is having to 'navigate' your website.
Every time I use a gov.uk service I’m thoroughly impressed. The design is always clear and the UX simple. Kudos to the team.
Is there is one thing that the British government does really well, its presentation of public information.
Marvel at our road signage!
Travel across London with significantly fewer missteps than in other cities of equivalent complexity of metropolitan area transit networks!
Apply to change ownership of a vehicle!
...let me have this. We don't have much to be proud of from the last ten years.
Marvel at our road signage!
Travel across London with significantly fewer missteps than in other cities of equivalent complexity of metropolitan area transit networks!
Apply to change ownership of a vehicle!
...let me have this. We don't have much to be proud of from the last ten years.
British typography has a long tradition.
As a foreigner, I always found public signs very pleasant and easy to read.
Gill Sans, which has a really nice modernist aesthetics, was developed for London Underground: https://en.wikipedia.org/wiki/Gill_Sans
As a foreigner, I always found public signs very pleasant and easy to read.
Gill Sans, which has a really nice modernist aesthetics, was developed for London Underground: https://en.wikipedia.org/wiki/Gill_Sans
What about running the fastest Covid vaccine rollout in Europe and helping Ukraine resist the invasion to preserve their sovereignty?
>Marvel at our road signage!
They're generally OK, but the fractions missing a bar, and using m as an abbreviation for miles are absolutely horrible.
They're generally OK, but the fractions missing a bar, and using m as an abbreviation for miles are absolutely horrible.
[deleted]
Even the content is fantastic. They work hard to make it easy to understand.
Have a look at the Home Office part of gov.uk and I think you'll soon change your mind. Pure abomination. At one point, before I kicked up a fuss, they had 2 distinct links - Biometric Residence Permit (BRP) and Biometric Residence Card (BRC) - with apparently different destinations but which, in fact, pointed to the same form. Worse, staff responding to BRP/BRC enquiries were convinced the links pointed to distinct forms and were even including the fictional link distinction in rationales for rejecting applications.
Then there was the form with fields which rejected input with trailing whitespace with no explanation, ie. no trim function. I could go on.
Then there was the form with fields which rejected input with trailing whitespace with no explanation, ie. no trim function. I could go on.
There's still plenty to criticize in the gov.uk web design, and I have. That allows me to say amongst other things, one thing you cannot criticize is their reaction: I got a response, it was timely and it valued my input according to its utility, and I felt respected as a user. They didn't over commit to adopting anything I proposed either so there's no false hope here.
(I complained about the difficulty finding and understanding overseas payment methods for UK citizens entitled to make national insurance contributions while not working in the UK, towards the UK state pension)
Many people misunderstand the use of colour in material design. What is a "clickable" is often unclear. I think in the gov.uk space its always reasonably clear what is, and is not a clickable element, and what is stylistic markup only.
(I complained about the difficulty finding and understanding overseas payment methods for UK citizens entitled to make national insurance contributions while not working in the UK, towards the UK state pension)
Many people misunderstand the use of colour in material design. What is a "clickable" is often unclear. I think in the gov.uk space its always reasonably clear what is, and is not a clickable element, and what is stylistic markup only.
I don’t usually resort to snarky comments but I feel it’s warranted here. It’s a bit odd that so much effort has been put into font sizes and yet there is a permanent cookie icon taking up 10% of my screen on mobile even after rejecting all cookies.
I truly believe that the EU has ruined the internet.
It just forced the internet to be honest. The internet's reaction ruined the internet.
The UK is not in the EU. We’re free to do away with cookie banners
It’s really stupid to blame the EU over websites decision to add unnecessary banners.
They’re doing it because they want explicit consent from visitors tired and fed up who just click “accept”, right?
Or is the annoying banner really absolutely required by legislation?
Or is the annoying banner really absolutely required by legislation?
If you only use functional cookies and not tracking ones then you are not required to have the users accept anything.
I am happy to see the author mention WCAG and British Dyslexia Association. They seem to have a refreshingly strong focus on accessibility.
I wonder how much of an uphill battle is fought inside the GDS and across the UK government to push for this kind of universal access.
Also, it's amazing how much of a "brand" GOV.UK is for me even in spite of (or perhaps due to?) its accessibility. To me the brand is: big strong blobs of the high-contrast colour palette, GDS Transport (the typeface), and a relatively (but pleasingly) narrow content.
I wonder how much of an uphill battle is fought inside the GDS and across the UK government to push for this kind of universal access.
Also, it's amazing how much of a "brand" GOV.UK is for me even in spite of (or perhaps due to?) its accessibility. To me the brand is: big strong blobs of the high-contrast colour palette, GDS Transport (the typeface), and a relatively (but pleasingly) narrow content.
I've worked for a few UK departments and been very impressed with not only their adherence to WCAG 2.1 AAA on user-facing tools, but also on internal administration tools. Accessibility is strictly required and your project will not be allowed to be released without it.
So they don’t have any video content on the sites?
Or do they actually have a sign language interpreter on each video on every site?
Or do they actually have a sign language interpreter on each video on every site?
In a previous job I worked on a site which had to meet gov UK guidelines despite not strictly being directly hosted on gov.uk, and early in production every video was re-recorded / re-produced with sign language interpretation included to meet guidelines.
They took accessibility incredibly seriously.
They took accessibility incredibly seriously.
That’s awesome! If only more goverments realised the need for this!
I don't recall running across video on gov.uk sites -- and offhand, can't think of any case where it would have been desirable.
This is documented under the 'video' section on the publishing guidelines[0]. Videos are heavily dissuaded for a large number of reasons.
[0] https://www.gov.uk/guidance/how-to-publish-on-gov-uk/images-...
[0] https://www.gov.uk/guidance/how-to-publish-on-gov-uk/images-...
They specifically try to steer clear of video content. It's less accessible, worse for people scanning for information, worse for people on slow connections or mobile data connections, and can become outdated whilst also being much harder to update.
They try to avoid video because it's data heavy and difficult to update. Though when I applied for a Civil Service job the videos had a signed version and a transcript.
Love GOV.UK design guidelines. Working for a government department at the moment as a contractor building some internal frontends and the design system is used internally as well. Really helps keep things consistent across all areas of government.
Yes, GOV.UK walks the walk: far more consistent than .GOV in the States.
UK
– 10 Downing Street https://www.gov.uk/government/organisations/prime-ministers-...
– HM Treasury https://www.gov.uk/government/organisations/hm-treasury
– Department for Education https://www.gov.uk/government/organisations/department-for-e...
US
– White House https://www.whitehouse.gov/
– Department of the Treasury https://home.treasury.gov/
– Department of Education https://www.ed.gov/
UK
– 10 Downing Street https://www.gov.uk/government/organisations/prime-ministers-...
– HM Treasury https://www.gov.uk/government/organisations/hm-treasury
– Department for Education https://www.gov.uk/government/organisations/department-for-e...
US
– White House https://www.whitehouse.gov/
– Department of the Treasury https://home.treasury.gov/
– Department of Education https://www.ed.gov/
The US is also going in this direction albeit slowly.
https://designsystem.digital.gov/
https://designsystem.digital.gov/
A bit strange that one of the showcased websites is awful on mobile.
GOV.UK is open source, and such a good design that Canada, Ireland, Australia and New Zealand have copied it.
Do you have a source for this?
For the NZ one you'll see the following snippet at the bottom of each component page:
> Credit. Guidance, original HTML and CSS derived from GOV.UK Design System.
https://design-system-alpha.digital.govt.nz/components/Butto...
> Credit. Guidance, original HTML and CSS derived from GOV.UK Design System.
https://design-system-alpha.digital.govt.nz/components/Butto...
Thanks!
That webpage's fonts simply renders poorly on my older Mac and on my Linux systems. Is it the AA that is wrong for the main font? The only system I have here where it renders kinda okay (I still find that font way too bold for paragraphs) is on Windows.
I just don't think it's a good font. I don't think it looks good. I don't think a font that renders poorly on many systems is good from a UI / legibility / accessibility perspective.
They may have "solved" the scaling issue but I don't see very careful thoughts about "typography" here.
A font which doesn't render well on several systems is simply broken.
Then the screenshots here are just badly resized:
I don't know what font they're using but it looks like some serious case of NIH syndrome and I do believe there are way better fonts out there.
I give 5 out of 10 at the very most.
P.S: it's also one of the rare website which renders with the center column so narrow and I don't like it either.
I just don't think it's a good font. I don't think it looks good. I don't think a font that renders poorly on many systems is good from a UI / legibility / accessibility perspective.
They may have "solved" the scaling issue but I don't see very careful thoughts about "typography" here.
A font which doesn't render well on several systems is simply broken.
Then the screenshots here are just badly resized:
https://designnotes.blog.gov.uk/2018/02/19/developing-new-typography-and-spacing-for-gov-uk-frontend/
I don't know what font they're using but it looks like some serious case of NIH syndrome and I do believe there are way better fonts out there.
I give 5 out of 10 at the very most.
P.S: it's also one of the rare website which renders with the center column so narrow and I don't like it either.
It renders completely fine on my Linux machine as well as my Windows one, and is fine on Android as well.
And the screenshots look perfectly normal.
I'm not sure what your particular issue is but maybe make a bug report?
And the screenshots look perfectly normal.
I'm not sure what your particular issue is but maybe make a bug report?
I quite like the font, and it renders perfectly on my Linux machine.
The center column is a bit narrow but that's a minor, easily fixed problem.
You should file a bug report.
The center column is a bit narrow but that's a minor, easily fixed problem.
You should file a bug report.
> smaller font sizes (14px and below) are bad for accessibility and should not be included as options in the typography scale
When improving our accessibility I noticed that in iOS any font size less than 16px on form inputs will zoom in if selected, which is really annoying as you have to zoom back out to see the page layout normally.
We actually had our :root set to 14px so this happened on every form input across the app. Definitely font sizes below the browser defaults (16px) can cause unexpected issues.
When improving our accessibility I noticed that in iOS any font size less than 16px on form inputs will zoom in if selected, which is really annoying as you have to zoom back out to see the page layout normally.
We actually had our :root set to 14px so this happened on every form input across the app. Definitely font sizes below the browser defaults (16px) can cause unexpected issues.
Setting your root font size to 14px is the problem. Fix that. Use em/rem units and don’t override the user’s chosen font size.
Yeah it was a janky setup. I think the root was 14px which was converted to rem and then multiplied by a scaleMultiplier depending on user settings.
As you pointed out the obvious solution was to increase the root size, but that would have significantly changed the UI for a lot of users… so I just targeted all form inputs for webkit only and set the default size in rem using !important to 16px.
As you pointed out the obvious solution was to increase the root size, but that would have significantly changed the UI for a lot of users… so I just targeted all form inputs for webkit only and set the default size in rem using !important to 16px.
> 1. Remove 14 on the font scale entirely (which used 14px on large screens and 12px on small screens)
HN please take a note and get rid of the tiny `font-size`s on this site please. Some text gets down to 9 or 10px.
HN please take a note and get rid of the tiny `font-size`s on this site please. Some text gets down to 9 or 10px.
I assume you mean font-size? Because HN doesn't use any non-standard font-weights?
Why a lengthy blogpost instead of "don't override the user agent's settings regarding size and font"?
To explain why it's a problem.