Default heading sizes and guidance

edwardhorsford commented 5 years ago

I feel like the default heading size used for h1s can be overly large - particularly where we're using one-thing-per page with a single field.

Postcode example:

To me the heading is out of proportion with the page. It also forces the main question to break on to two lines, which I'd normally want to avoid for legibility.

Longer pages (content pages?) may warrant a larger heading, or where there's other fields on the page - but in this scenario, it doesn't feel correct.

If I were designing this page without the design system, I'd use govuk-heading-l / 36px for most in-service pages. On passports all but our start / intro pages used this size.

The headings section of the design system includes examples of each size, but no mention of what's appropriate or not. Failing it being mentioned there, I think services are likely to use what's used in the examples in the design system - which all seem to use xl.

My suggested actions:

Add guidance to the headings section of the design system on type sizes - even if the answer is that services should choose something appropriate.
Reduce the heading size on example pages where it's deemed to be too large (most question pages?).
Depending on the above, update templates as needed - eg prototype kit.

stevenaproctor commented 5 years ago

@edwardhorsford I agree that the xl is can feel a little shouty at times. Any guidance should mention choosing heading structure should be consistent. It is odd when the size and heading hierarchy changes from one page to the next.

NickColley commented 5 years ago

Just to note that GOV.UK Publishing changes the size of their headings depending on on the circumstance.

Here's the code for the 'document collection' format: https://github.com/alphagov/government-frontend/blob/master/app/views/content_items/document_collection.html.erb#L9

Which is using the following variant of their title component: https://govuk-publishing-components.herokuapp.com/component-guide/title/long_title_with_context

chrisadesign commented 5 years ago

Just adding another example as I brought this up on Slack. We've got some fairly long questions in our service and xl feels a bit much so thinking of dropping to l across the service.

joelanman commented 5 years ago

@chrisadesign this is one of the main reasons I'd use a smaller heading size for question pages - also the lack of balance between very large question text and small answer text.

dashouse commented 5 years ago

From an end goal perspective, the current examples container is not as full featured as we might like. One of the original designs allowed the user to configure their own version of each component. By including something like this the default example would appear less strict.

I cannot find the original design but I have a small unstyled prototype which shows some basic functionality:

configure-component

@nickcolley Made an awesome version of something like this too where you could edit the HTML or Nunjucks directly to create your example before copying it.

Regarding the current state of things, there's some really good points made here. Some of the original constraints we had around this decision are no longer issues. For example, when this decision was made, we were considering a prose-scope / markdown container that could work with components inside and it was important to try and retain the <h1> = govuk-heading-xl, <h2 = govuk-heading-l sizing relationship in some way.

I'm going to set aside some time to look into this and see if it makes sense to bump everything in a service down one level or see how changing size based page type feels.

StephenGill commented 4 years ago

I think this is covered by the recent update to headings guidance: https://design-system.service.gov.uk/styles/typography/#headings - but feel free to re-open if you disagree.

edwardhorsford commented 4 years ago

@StephenGill I don't think it is covered.

We're continuing to see services with headings that are out of proportion with the rest of the content - likely because all the examples use xl.

Nearly all the existing examples still use xl - which is generally too large for most pages.

If question pages aren't meant to default to xl, then the examples shouldn't use that as a default. If they are meant to default to that, I'd love to know some more context around that decision.

edwardhorsford commented 4 years ago

@StephenGill I'm unable to reopen this issue.

joelanman commented 4 years ago

christopherthomasdesign commented 4 years ago

I had a look through the examples that use govuk-heading-xl as the default heading size. I did this manually 😂which was good for actually looking at them all but means I may have missed the odd one...

Layouts:

Templates:

Components:

Patterns:

We'd need to think a bit about when to use different heading sizes in examples. It seems a lot neater to just use xl by default and help users understand when to change it, because a lot of these examples are devoid of context. However, I appreciate that most of the questions / form fields are shown as they would be if they were the only question on a page. Interestingly, we use a l size on one of the ethnic groups questions but don't mention why.

terrysimpson99 commented 4 years ago

There's a related inconsistency in the examples that could be fixed as part of this. The examples use three different styles: (1) the field label is h1 (such as 'date input'); (2) the field label is not h1 and is bold (such as 'payment card details'); (3) the field label is not h1 and is non-bold (such as 'bank details'). Different designers unaware of the inconsistency draw may be applying bold when it's not necessary depending on which example they use.

kellylee-gds commented 4 years ago

Discussed at triage about considering the following comment from the backlog in this work https://github.com/alphagov/govuk-design-system-backlog/issues/64#issuecomment-604535397 @christopherthomasdesign

alphagov / govuk-design-system

Default heading sizes and guidance #698