7 ms·

Making the Gov.uk front end typography scale more accessible

sposeray 4y ago
[dead]
politelemon 4y ago
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.
- shortcake27 4y ago
  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.
  - deleted 4y ago
    [deleted]
  - psd1 4y ago
    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.
    - petr_tik 4y ago
      What about running the fastest Covid vaccine rollout in Europe and helping Ukraine resist the invasion to preserve their sovereignty?
    - nextos 4y ago
      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 https://en.wikipedia.org/wiki/Gill_Sans
      - bearmode 4y ago
        Shame about the dog-fucking but yeah Eric Gill was a genius at design.
        extasia 4y ago
        You're gonna let the daughter-fucking slide but not the dog-fucking?..
    - xxpor 4y ago
      >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.
- cutler 4y ago
  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.
- nicbou 4y ago
  Even the content is fantastic. They work hard to make it easy to understand.
sigwinch28 4y ago
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.
- gchq-7703 4y ago
  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.
  - eurasiantiger 4y ago
    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?
    - bearmode 4y ago
      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.
    - jfk13 4y ago
      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.
      - gchq-7703 4y ago
        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-and-videos https://www.gov.uk/guidance/how-to-publish-on-gov-uk/images-...
razakel 4y ago
GOV.UK is open source, and such a good design that Canada, Ireland, Australia and New Zealand have copied it.
- unicornporn 4y ago
  Do you have a source for this?
  - petepete 4y ago
    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/Button/ https://design-system-alpha.digital.govt.nz/components/Butto...
    - unicornporn 4y ago
      Thanks!
HuwFulcher 4y ago
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.
- divbzero 4y ago
  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-office-10-downing-street https://www.gov.uk/government/organisations/prime-ministers-... – HM Treasury https://www.gov.uk/government/organisations/hm-treasury https://www.gov.uk/government/organisations/hm-treasury – Department for Education https://www.gov.uk/government/organisations/department-for-education https://www.gov.uk/government/organisations/department-for-e... US – White House https://www.whitehouse.gov/ https://www.whitehouse.gov/ – Department of the Treasury https://home.treasury.gov/ https://home.treasury.gov/ – Department of Education https://www.ed.gov/ https://www.ed.gov/
  - saratogacx 4y ago
    The US is also going in this direction albeit slowly. https://designsystem.digital.gov/ https://designsystem.digital.gov/
    - unsafecast 4y ago
      A bit strange that one of the showcased websites is awful on mobile.
jorgesborges 4y ago
> 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.
- tatersolid 4y ago
  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.
  - jorgesborges 4y ago
    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.
deanc 4y ago
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.
- VWWHFSfQ 4y ago
  I truly believe that the EU has ruined the internet.
  - nicbou 4y ago
    It just forced the internet to be honest. The internet's reaction ruined the internet.
  - switch007 4y ago
    The UK is not in the EU. We’re free to do away with cookie banners
  - kaba0 4y ago
    It’s really stupid to blame the EU over websites decision to add unnecessary banners.
    - switch007 4y ago
      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?
      - kaba0 4y ago
        If you only use functional cookies and not tracking ones then you are not required to have the users accept anything.
TacticalCoder 4y ago
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: https://designnotes.blog.gov.uk/2018/02/19/developing-new-typography-and-spacing-for-gov-uk-frontend/ Makes zero sense to resize screenshots like that, messing the font, when the whole point is to talk about typography (and if they're not resized, then there's something deeply broken with the fonts not just for me). 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.
- bearmode 4y ago
  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?
- unsafecast 4y ago
  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.
ggm 4y ago
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.
texxtxxet 4y ago
> 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.
- detaro 4y ago
  I assume you mean font-size? Because HN doesn't use any non-standard font-weights?
Am4TIfIsER0ppos 4y ago
Why a lengthy blogpost instead of "don't override the user agent's settings regarding size and font"?
- razakel 4y ago
  To explain why it's a problem.

[dead]

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.

shortcake27 4y ago
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.
- deleted 4y ago
  [deleted]
- psd1 4y ago
  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.
  - petr_tik 4y ago
    What about running the fastest Covid vaccine rollout in Europe and helping Ukraine resist the invasion to preserve their sovereignty?
  - nextos 4y ago
    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 https://en.wikipedia.org/wiki/Gill_Sans
    - bearmode 4y ago
      Shame about the dog-fucking but yeah Eric Gill was a genius at design.
      - extasia 4y ago
        You're gonna let the daughter-fucking slide but not the dog-fucking?..
  - xxpor 4y ago
    >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.
cutler 4y ago
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.
nicbou 4y ago
Even the content is fantastic. They work hard to make it easy to understand.

sigwinch28 4y ago

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.

gchq-7703 4y ago
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.
- eurasiantiger 4y ago
  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?
  - bearmode 4y ago
    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.
  - jfk13 4y ago
    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.
    - gchq-7703 4y ago
      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-and-videos https://www.gov.uk/guidance/how-to-publish-on-gov-uk/images-...

razakel 4y ago

GOV.UK is open source, and such a good design that Canada, Ireland, Australia and New Zealand have copied it.

unicornporn 4y ago
Do you have a source for this?
- petepete 4y ago
  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/Button/ https://design-system-alpha.digital.govt.nz/components/Butto...
  - unicornporn 4y ago
    Thanks!

HuwFulcher 4y ago

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.

divbzero 4y ago
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-office-10-downing-street https://www.gov.uk/government/organisations/prime-ministers-... – HM Treasury https://www.gov.uk/government/organisations/hm-treasury https://www.gov.uk/government/organisations/hm-treasury – Department for Education https://www.gov.uk/government/organisations/department-for-education https://www.gov.uk/government/organisations/department-for-e... US – White House https://www.whitehouse.gov/ https://www.whitehouse.gov/ – Department of the Treasury https://home.treasury.gov/ https://home.treasury.gov/ – Department of Education https://www.ed.gov/ https://www.ed.gov/
- saratogacx 4y ago
  The US is also going in this direction albeit slowly. https://designsystem.digital.gov/ https://designsystem.digital.gov/
  - unsafecast 4y ago
    A bit strange that one of the showcased websites is awful on mobile.

jorgesborges 4y ago

> 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.

tatersolid 4y ago
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.
- jorgesborges 4y ago
  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.

deanc 4y ago

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.

VWWHFSfQ 4y ago
I truly believe that the EU has ruined the internet.
- nicbou 4y ago
  It just forced the internet to be honest. The internet's reaction ruined the internet.
- switch007 4y ago
  The UK is not in the EU. We’re free to do away with cookie banners
- kaba0 4y ago
  It’s really stupid to blame the EU over websites decision to add unnecessary banners.
  - switch007 4y ago
    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?
    - kaba0 4y ago
      If you only use functional cookies and not tracking ones then you are not required to have the users accept anything.

TacticalCoder 4y ago

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: https://designnotes.blog.gov.uk/2018/02/19/developing-new-typography-and-spacing-for-gov-uk-frontend/ Makes zero sense to resize screenshots like that, messing the font, when the whole point is to talk about typography (and if they're not resized, then there's something deeply broken with the fonts not just for me). 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.

bearmode 4y ago
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?
unsafecast 4y ago
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.

ggm 4y ago

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.

texxtxxet 4y ago

> 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.

detaro 4y ago
I assume you mean font-size? Because HN doesn't use any non-standard font-weights?

Am4TIfIsER0ppos 4y ago

Why a lengthy blogpost instead of "don't override the user agent's settings regarding size and font"?

razakel 4y ago
To explain why it's a problem.