Design Mockups: Font choice

[yatil]

I am not 100% fond of the font. It is very rounded and it has some undesirable features:

• uppercase i and lowercase L look the same
• d, p, and q are essentially mirrored versions, which is hard to read for people with dyslexia
• I wonder if the font supports international charsets? Korean, Chinese, Japanese?

A good way to test is to use the “agjJlLiIqbd69” characters – they should be easily distinguishable.

One of the most versatile font language-wise is probably Noto but it could be better with the “agjJlLiIqbd69” test:

[AndrewArch]

[strong]
agree - a font that better differentiates between similar shaped characters would be better

[James-Green]

TF (Eric) to provide alicia requirements for another font that will meet all needs that are not being met by current font (by Friday 2/3) then she can mock up some alternative designs.

[yatil]

Here are the requirements for fonts. We might not be able to check off all the points, which is OK, but we should try to make an effort:

• Readability. To cater for different cognitive disabilities, like dyslexia, it is important that glyphs are easy to distinguish – especially easily confused glyphs like qp and db and Il. A good way to get an impression is to look at the following characters “agjJlLiIqbd69”.

  • Another aspect is the font-weight. Fonts with a thinner weight look good on high resolution screens but can look bad on low resolution displays, but this depends highly on the font.

• Internationalization: As an international organization, we host content in many different languages. As it doesn’t look inviting when the font changes, a font that has more than the (Extended) Latin charset available would be preferable.

  • Especially custom fonts with support for Korean, Chinese and Japanese are hard to find. If too hard, we can go to system fonts for resources in those languages.

• Performance: Downloading a wide range of fonts weights can make page loads slow quickly. The most effective way to reduce file size is to use a small amount of font weights. Subsetting (and loading other character sets on demand) is a possibility, however.

Some good advice on text treatment can be found in this A-List-Apart article.

All of the above is not only subjective but also highly dependent on browser and operating system combination. As we want to be as inclusive as possible, we need to make sure that the font combines aesthetics and practicality.

[shwetank]

One of the most versatile font language-wise is probably Noto

I second the noto suggestion, from an i18n perspective.

[yatil]

Here’s a test page with the Rubik font in all the colors and different weights (300/500 and 400/700 for normal and bold, respectively) to help us decide:

https://yatil.github.io/wai-colors-font-test/

I find the font to be growing on me, I think the contrast is sufficient (and will be even better when we come to a consensus on #39, I hope). I think the thinner font combination (300/500) works well on retina displays but has some fuzziness around the edges on lower resolution displays. For future proofing of the layout, we might want to use the thinner font by default but switch to the other one when we detect a lower resolution screen. CSS can do that.

Any comments?

[shawna-slh]

@yatil As Brent mentioned in the call today, it would be helpful in the prototype to have real text (rather than just Lorem ipsum) so we can actually read some text in order to help evaluate readability. :-)

[shawna-slh]

If I am seeing things correctly in the test page, the only sans serif fonts that distinguish lowercase l and uppercase I are Nobo Sans and Raleway. Nobo Sans is excellent for internationalization. Unless anyone has other suggestions that better meet the readability and internationalization criteria, I assume we go with Nobo Sans.

(For the record: I personally do not have strong feelings about the visual aesthetics of fonts. I am happy to go with others' perspectives on that. From a W3C WAI perspective, readability is vital and internationalization is important for the font.)

[shawna-slh]

/me put together a simpler page for review: http://htmlpreview.github.io/?https://github.com/w3c/wai-website-design/blob/master/font-check.html

[johnfoliot]

Greetings EO.

Overall, I agree that the Noto Sans font works well as demonstrated on the test page Shawn posted.
I am more concerned however with the line-height, and specifically the "space" between the lines. Can we see more line-height introduced into the sample?

[dboudreau]

I have no strong feelings against Noto Sans either. If we can agree that this one is good for i18n and readability, then I'm fine with that choice as well. While it's an important decision to make, I'm just hoping we don't turn the font selection process into a 6 month debate. From the perspective of WCAG, SC 1.4.8 requires a minimum of space, which we don't seem to be following at the moment. Line-height on body is currently set to 1.35em.

Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

[shawna-slh]

In order to help evaluate the font now, I changed main line-height to 1.5 (and put 1.35 in one section for comparison). I have not tweaked any other spacing for now. I expect that the final design will have different paragraph spacing, list spacing, etc.

[yatil]

I see the body text in @slhenry’s mockup is only 13.6px (85%) which is very small. I would really prefer 16px, which would be in line with more readable, bigger fonts that are used in editorial content on the web. As for other measurements, they will change with the font. (Good to point to 1.4.8, @dboudreau, while this is a AAA level criterion, we can do it – however it depends on the font if a line-height of 1.5 in CSS looks coherent or if there is a blank line between every line of a paragraph.)

Just my two cents, I don’t feel strongly :-)

[shawna-slh]

Body text size is not yet determined -- will err on larger for sure!

/me not good judge of that since have larger fonts in various settings. Currently it looks too big to me, so it must be picking up more settings than usual. ;-)

@yatil please feel free to change it to better size.

[dboudreau]

/me agrees we should err on the side of a larger font size. If designed properly, it will not feel awkward at all.

[shawna-slh]

+1s on this font from 8 people in Low Vision Task Force https://www.w3.org/2017/03/09-lvtf-minutes.html

[dboudreau]

@slhenry That's all I REALLY needed to hear. I'm sold. That was my Jerry Maguire moment of the day, and you are my Tom Cruise. ;)

[shawna-slh]

via e-mail :

It's a lovely typeface! Clean, modern looking, and easy to read.

[koalie]

+1
I don't have any issues with Noto Sans. Thanks for working on this!
I wonder, can this exploration benefit the rest of the w3.org website?

[johnfoliot]

@Coralie... oh, please! :D JF

…

On Fri, Mar 10, 2017 at 3:23 AM, Coralie Mercier ***@***.***> wrote: +1 I don't have any issues with Noto Sans. Thanks for working on this! I wonder, can this exploration benefit the rest of the w3.org website? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABK-c7DeQnwySunNgE9vmYxQZpvKdiI1ks5rkRaKgaJpZM4LyF2O> .

-- John Foliot Principal Accessibility Strategist Deque Systems Inc. john.foliot@deque.com Advancing the mission of digital accessibility and inclusion

[shawna-slh]

+1s on this font from all in EOWG topic today (and support for 1.5 line-height) https://www.w3.org/2017/03/10-eo-minutes.html

[shawna-slh]

@koalie Yes! From all I've learned, I think Noto would be an excellent font for w3.org
(and it would be good if main w3.org and WAI sub-site used same font)

[koalie]

@tripu ping?

[tripu]

👍 to a more accessible and modern font, and 👍 to using it in as many places within w3.org as possible!

I don't know about the particular merits of Noto Serif, but @yatil has a point about the absolute need for different glyphs to be distinguishable, this one looks elegant and professional and its licence seems permissive and open enough.

We'll have to raise the change to the broader team in respect to two aspects:

• Convenience of web fonts in general (caveats, support, official stand, possible conflicts in our site).
• Impact in performance and load time for w3.org pages.

[yatil]

@ALL \o/

@tripu

For our audience, we should go with woff2 and woff formats which are wildly supported. Browsers that have no support can safely fall back to sans-serif.

It would be good to have them on some sort of CDN, but the footprint is relatively small anyway and the fonts are well-cached locally. The Filament Group has a great article on how to load fonts in a performance-conscious way.

[rydbergkevin]

+1, and +1 on the font-size discussion as well.

[shawna-slh]

Noto Sans decided!

Lots of +1s and no concerns from:

• W3C Communications Team
• WAI staff (including Judy Brewer)
• Low Vision Task Force (LVTF)
• Cognitive and Learning Disabilities Accessibility Task Force (COGA)
• EOWG
  (8 March e-mail)

[gosko]

Hi, please excuse my butting in (late); @tripu mentioned this on our call today.

I just wanted to +1 a larger font size — I have always thought that most text on any given web page should be left as the reader's preferred size, i.e. font-size: 100%. (or even better, just left unspecified)

It seems fine to use smaller text for things you want to de-emphasize such as footers or image captions.

[shawna-slh]

deleted from CSS body font-size: 83%;
-- so now unspecified. :)

[tripu]

I have written W3C-Noto, a little user script that runs on every page matching the pattern http[s]://[*.]w3.org[/*] to load the font from Google and append these rules:

* {
  font-family: 'Noto Sans', sans-serif !important;
  line-height: 1.5 !important;
}

Details after the fold.

This is just for volunteers to test the change throughout the W3C site for a few days; it is a brute force approach that may cause oddities in different sub-sites and areas of the site… I am interested in those issues; please report them directly to me or on this thread.

---

How to test:

1. Install a user script extension/add-on in your browser. For Chrom*, Tampermonkey; for Firefox, Greasemonkey. Other browsers: see here. (You may need to restart your browser after installing the user script manager.)
2. Visit the page of W3C-Noto on Greasy Fork and click the green button “install this script”.
3. Visit w3.org pages normally; the font should have changed.