Default font-weight is too light, almost unreadable

[IBBoard]

Steps to reproduce

1. Log in to NextCloud
2. View a text-heavy page (e.g. News app articles)

Expected behaviour

Reading should be easy, using a regular font

Actual behaviour

NextCloud defaults to a "light" weight of font, which is uncomfortable to read in large blocks of text.

(The "S" in particular doesn't work well in "light" at this font size)

Server configuration

Operating system: CentOS 7

Web server: Apache 2.4.6

Database: MariaDB 5.5.60

PHP version: 7.2.10

Nextcloud version: 14.0.3

Updated from an older Nextcloud/ownCloud or fresh install: Update

Where did you install Nextcloud from: Tarball from the web site, then web-based updater

Signing status:

Signing status

No errors have been found.

List of activated apps:

App list

Enabled: - accessibility: 1.0.1 - activity: 2.7.0 - admin_audit: 1.4.0 - apporder: 0.5.0 - bookmarks: 0.13.1 - bruteforcesettings: 1.1.0 - calendar: 1.6.2 - cloud_federation_api: 0.0.1 - comments: 1.4.0 - contacts: 2.1.6 - dav: 1.6.0 - federatedfilesharing: 1.4.0 - federation: 1.4.0 - files: 1.9.0 - files_pdfviewer: 1.3.2 - files_sharing: 1.6.2 - files_texteditor: 2.6.0 - files_trashbin: 1.4.1 - files_versions: 1.7.1 - files_videoplayer: 1.3.0 - firstrunwizard: 2.3.0 - gallery: 18.1.0 - logreader: 2.0.0 - lookup_server_connector: 1.2.0 - news: 13.0.2 - nextcloud_announcements: 1.3.0 - notifications: 2.2.1 - oauth2: 1.2.1 - passman: 2.1.4 - password_policy: 1.4.0 - provisioning_api: 1.4.0 - serverinfo: 1.4.0 - sharebymail: 1.4.0 - support: 1.0.0 - survey_client: 1.2.0 - systemtags: 1.4.0 - tasks: 0.9.7 - theming: 1.5.0 - twofactor_backupcodes: 1.3.1 - updatenotification: 1.4.1 - workflowengine: 1.4.0 Disabled: - encryption - files_external - user_external - user_ldap

Nextcloud configuration:

Config report

…

Are you using external storage, if yes which one: Local

Are you using encryption: HTTPS? Yes.

Are you using an external user-backend, if yes which one: No

Client configuration

Browser: Firefox 62.0.3

Operating system: openSUSE Tumbleweed

[nextcloud-bot]

GitMate.io thinks possibly related issues are #2730 (Change default fonts to Materials Icons), #12 (Issues default text), #10946 (Dark Theme - Text unreadable), #7401 (Theming on light color), and #7232 (webdav was working, now almost unusably slow).

[MorrisJobke]

cc @nextcloud/designers @karlitschek

There were already some steps in the past weeks: #11538 and #11616.

Let's first properly discuss this and then change the CSS, because it is a lot more than to change the css weight: you need to include correct font files, make it look nice together with other font sizes and weights especially when headers are involved or text is bold/italic.

[MorrisJobke]

Especially also @jancborchardt for this one here as we discussed this.

[karlitschek]

We include a high contract theme that can be used if you like high contrast. I'm not sure we should change the default.

[MorrisJobke]

We include a high contract theme that can be used if you like high contrast. I'm not sure we should change the default.

I need to say, that the font is good to read on a high DPI screen, but far from good to read on a normal full HD screen. I just took a screenshot of Nextcloud and Google Drive on the full HD screen, where the font of Nextcloud is a bit blurry, while the one of Google Drive is good to read. Then I moved this screenshot to the high DPI screen and it is easy to read even when scaled down. We should maybe also check how it looks on non-high-DPI screens:

[MorrisJobke]

Especially the sidebar and all the non-highlighted parts where there is not a dark gray used as color (extensions, timestamp, ...) are not as clear as they could be.

[jancborchardt]

(Please read the entire comment :)

I do absolutely agree that light font weight is too thin for proper readability, not to speak of accessibility. I’ve been meaning to change it for some time, and I do not think that a setting for this in the accessibility settings is the proper way to fix an issue concerning basic readability.

Also: None of the modern web apps really use light anymore, it was a trend some years ago and everyone moved back – even Apple who were pushing it.

I did a very quick experiment to push up the font pairing from 300 (Light) + 600 (Semibold) to 400 (Normal) + 700 (Bold): https://github.com/nextcloud/server/tree/font-weight
(We could also think about keeping the emphasis at Semibold (600) instead of Bold (700), as that’s still enough contrast with Normal (400).)

---

Now this is a different topic, but we could even think about a change of typeface. I thought about that before, and Nunito is a round and friendly typeface which fits very well with our form language:

Also here a branch to try it out: https://github.com/nextcloud/server/tree/font-nunito

What do you think @karlitschek @MorrisJobke @nextcloud/designers?

[IBBoard]

@karlitschek I'm not looking for specifically high contrast. Just not low-contrast/poor font rendering! Everything about the other fonts is fine and readable, except the default weight.

If I'm understanding @MorrisJobke right then I'd definitely ask for checks on "regular" screens! I'm on a 25" 1440p monitor, which is higher-than-normal DPI, but obviously not at 4K levels. I suspect "high DPI" is still rather niche outside of flagship smart phones.

Personally, I prefer the more squared edges or a font like OpenSans rather than a rounded Nunito (although it's less apparent in the screenshot), but I stopped using OpenSans on the desktop and moved to Noto Sans after finding some letters a bit odd and fractionally poor for reading at some sizes.

All that said, I'm just an amateur enthusiast/minor font fan and a user, not a designer!

Thanks.

[MariusBluem]

@jancborchardt I have just tried it out with Roboto. Looks quite nice and more easy to read for me.

[jancborchardt]

Noto Sans is basically the same as Open Sans with slight form improvements and some additions (it seems). We could switch to that but it would be just a small fix. With Noto we would definitely only have Regular and Bold as the other weights do not seem to exist: https://fonts.google.com/specimen/Noto+Sans (likely because of the increased language coverage)

Roboto is not really a good candidate since it’s recognizable as "the Android font". Just like we wouldn’t use Fira Sans cause it’s core Mozilla branding already, or Ubuntu because it’s pretty characteristic for Ubuntu.

@nextcloud/designers maybe let’s try out the font-nunito branch locally for some time to evaluate if it’s working for us?

[juliusknorr]

@nextcloud/designers maybe let’s try out the font-nunito branch locally for some time to evaluate if it’s working for us?

This looks pretty nice to me. Especially on non-highdpi displays this is good improvement. I think we night need some adjustments on the regular font color, since a full black (as we have it now) looks a bit to harsh. A quick test with the css var --color-main-text: #444444; gives the same visual level of text contrast, while the font looks much sharper then with Open Sans. 👍 from my side.

[jancborchardt]

Good stuff @juliushaertl! Although we should set the font color with rgba, black with alpha value. Then it looks nice on backgrounds other than white as well by blending in.

[IBBoard]

I've just tried Open Sans Regular with color: #444444 and it seems a bit light for body text. Readable, but as if it is slightly de-emphasised. #222222 seems to be dark but not absolute black-on-white contrast (although --color-main-text seems to be #000000 on my NC14.0.3 install, if I'm reading the DOM inspector right).

(Slight aside, in case people read this later and see "Noto is basically Open Sans" - https://tiff.herokuapp.com/ lets you compare fonts, and the two fonts are basically identical except for the capital I and lower-case g, plus minor variances in symbols! You might need Open Sans installed locally for the comparison to work, though)

[jancborchardt]

Changed the --color-main-text to #222222 in the font-nunito branch. #444444 was definitely too light, at that point we get contrast issues.

Please try out the branch again. :) @nextcloud/designers any input is welcome!

[jancborchardt]

Pull request created at #11932 – please review! 🎉

[MorrisJobke]

Pull request created at #11932 – please review! 🎉

Is this fixed now or are there further adjustments needed?

[jancborchardt]

Font changes merged through #11932 (comment) 🎉