WoolHat Posts - Answer Overflow

WoolHat

•Created by WoolHat on 10/6/2023 in #front-end

Designed a handoff guide for UX and now I'm planning a similar document for developers

I’m sure this happens everywhere but at work we have this issue that no website we develop ends up looking like the original design. So I was tasked with doing a guide to close that gap between design and development. So the designer guide was focused on how to better communicate some of the details or concepts. Provided components for base variables such as color or typography. But that’s finished so it’s all good. Now, I’m doing the same, but for front end developers. And I’m struggling with how to tackle this. This is the outline I have. Figma: - Layers - Local styles Accessibility - Titles - Headings - Alt Text - Focus state Any tips or good talking points to include? I'm a designer first, web developer second so I tend to second guess what I think might be useful. Most of the department works with VUE so I tagged it.

22 replies

KPCKevin Powell - Community

•Created by WoolHat on 9/8/2023 in #front-end

Curious about double font-size in gov.uk typography styles

Hey everybody, I was at a meeting with my team (UX) and a colleague presented some work based in gov.uk. Cheking with the inspector we found that in most cases for the typography styles they use font-size twice. First in pixels and then in rem. Like this (some selectors omitted for the sake of the question):

.govuk-heading-l{
  font-size: 36px;
  font-size: 2.25rem;
}

.govuk-heading-l{
  font-size: 36px;
  font-size: 2.25rem;
}

So, the first font-style will always overwritten by the second. It wouldn't be because of different browsers, like with box-shadow or other styles. So my question is... Why does gov.uk do this? Readability? Thanks for your time

5 replies

Gaming

Programming