Typography

[IanPouncey]

https://bbc.github.io/gel/foundations/typography/

[IanPouncey]

Extrapolation from GEL technical recommendations

Required

• The body font-size must be adjustable by different means
• The body font-size must be between 15 and and 18 pixels, depending on the screen dimensions
• Be sure not to suppress zooming by touch on handheld devices
• Measure (line length) must be:
  • Set using an appropriate unit
  • Allowed to decrease in accordance with the width of its containing element
• Acronyms and initialisms must appear in all-caps
• Do not increase the letter-spacing of sentence-case text.
• Links must not be differented by colour alone
• Provide links with an underline to differentiate them
• Do not underline non-link text

Recommended

• The body font-size should always be set in relative units such as ems and rems.
• The root font-size should be set as a percentage of the user's chosen size, and all other sizes should be relative to this one.
• Your viewport meta tag should omit user-scalable=no
• You should not use justified text, instead align text along the left hand side
• Measure (line length) should be no more than 80 characters, but between 60 and 70 is better still
• Leading (line height) for body copy set in Reith Serif should be 1.375
• Leading (line height) should not be hard-coded using the px unit
• White space between a preceding section and a heading should be greater than the white space between the heading and the first paragraph of its own section
• Text set in all caps should be avoided in almost all cases
• Avoid placing text over complex images such as photographs
• Avoid unicode symbols in favor of SVG-based icons

Implied

• There must be sufficient contrast between foreground text and backgrounds, in line with WCAG2.1 1.4.3 Contrast

Suggested ACT expectations

• There must be sufficient contrast between foreground text and backgrounds, in line with WCAG 2.1 1.4.3 Contrast
• Do not suppress zooming by touch on handheld devices
• Acronyms and initialisms must appear in all-caps
• Links must not be differented by colour alone
• Do not underline non-link text

[micmath]

Re: "Do not increase the letter-spacing of sentence-case text." I think this sounds slightly too general and proscriptive. Maybe add clarity by saying something like "It should be possible for the user to override any typographical settings (size, style, variants etc) if they wish, but the default for sentence text should be Reith and should use the default typographical settings defined in the font." Or summin'?

[edit] This appears to derive from the GEL Design Docs on Typography, which says 'BBC Reith has been designed with legibility and readability at its core. Because of this it is important to not adjust the tracking (also known as letter spacing).'

[micmath]

Re "Provide links with an underline to differentiate them" well yes, buhhh.... The BBC has a long history of not doing that, don't they? A quick check just now finds 106 links on the BBC homepage, and nothing appears to have an underline unless you give it hover or focus state. I'm torn on this. The advice is good but it's not GEL in practice. I might change this in the Technical Docs.

[edit] The GEL Design Docs don't go this far. For example they strongly suggest that emboldening is an acceptable way to signal a link: 'Heavier weights should mainly be used for headlines, titles and links - basically anything interactive or that needs to shout.' I will update the Technical Docs to match that.

[micmath]

re "You should not use justified text, instead align text along the left hand side" I would add for left-to-right text. Mustn't forget language direction!

[micmath]

I've updated the Technical Documentation to clarify. It now says:

The BBC has traditionally used heavier font-weighting to visually differentiate linked text from surrounding body text, adding an underline that appears on hover or focus. You can follow this established convention by incorporating the underline indicator in your links depending on the hover / focus state, using either text-decoration: underline or a border.

[micmath]

Considering the comments, this is ready to go.

[EmmaJP]

Shouldn't there also be an ACT expectation around font-size being adjustable rather than fixed units?

[micmath]

Adjustable in what way? Seriously there are multiple ways that people use to increase legibility by enlarging the effective font size, including zooming (via cmd-plus in a browser). Do you mean that the size is expected to be set in relative units? @IanPouncey already lists that under the Recommended heading. Or what specifically is the change you are suggesting?

[micmath]

In my experience the most likely problem the user will have when adjusting the font size in a bespoke way (I, for example, have the prefers-larger-text option set in my mobile which tends to increase the size of anything textual) is that the layout isn't flexible enough to accommodate it. Suggesting that if we document the ability to set larger font-size, the layout must also be self-adjusting to deal with that (within reason).

[EmmaJP]

I was just surprised that the recommended relative units isn't one of the ACT expectations. I feel it should be and am curious about why it isn't.

I'm aware that for many users (like myself or someone who's wheelchair prevents getting closer to the screen) setting a slightly larger default font-size is the only accommodation needed, and it should be respected complete with reflow to a reasonable extent. Bryn Anderson and (I think) Matthew Tylee Atkinson have given talks about it.

[micmath]

@EmmaJP I agree with the recommendation, but was assuming that things listed under "Recommended" would be included in the final deliverable. @IanPouncey can you clarify that I'm understanding that correctly?

I recently read: https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/ which has some excellent references related to this issue, such as:

• WCAG 1.4.4: Users must be able to resize text without assistive technology up to 200 percent, without loss of content or functionality. (Level AA)
• WCAG 1.4.8: Ideally, we should provide appropriate spacing between lines and paragraphs, and we shouldn’t be requiring the user to scroll horizontally to read a line of text on a full-screen window. (Level AAA)
• WCAG 1.4.10: Users must be able to resize text without being forced to scroll both horizontally and vertically to read that content. (Level AA)

[micmath]

I note that while this issue was open, The BBC GEL Design Guidelines have been updated with information about Spacing Units. This excerpt seem relevant:

Developers at the BBC define space in rem (root em) units. 1 rem is normally equivalent to 16px. Rem units are especially useful for maintaining high accessibility standards as websites coded with rem units will be compatible with browser text resizing. Spacing units are great because they allow designers and developers to speak the same language whilst valuing each discipline's mother tongue, i.e. pixels for a designer and rem units for a developer.

[EmmaJP]

Many BBC devs seem to use rem units these days, especially for the more component based stuff that doesn't know where it will be placed in the DOM.

[micmath]

@IanPouncey Waiting for changes requested from merge request.