Change typeface to Nunito #11932

jancborchardt · 2018-10-19T10:29:46Z

Based on discussions we had, most recently in #11873

🔤 Change typeface from Open Sans to Nunito → its rounded design works well with our branding, and it also gives a much friendlier feel. 😊
👀 Move from Light/Semibold to Regular/Bold for better readability
🎛️ Change main text color from harsh #000000 to #222222

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jospoortvliet · 2018-10-19T11:22:34Z

I absolutely LOVE it. 👍 🥇

skjnldsv · 2018-10-19T11:41:14Z

I really like it as well!
Could we also rethink our headings at the same time? Since we're changig the font, so we can really have differences between h1,h2,h3 and h4? Pleaaaase @jancborchardt 🙈 ;)

🎉

MorrisJobke · 2018-10-19T12:00:42Z

It is far better to read with this on a full HD screen over here.

karlitschek · 2018-10-19T12:54:13Z

looks good 👍

jancborchardt · 2018-10-19T13:19:24Z

@skjnldsv that’s a different discussion – let’s work on things step by step. :)

@MorrisJobke @jospoortvliet @karlitschek could I have your approving review then? ;)

Others from @nextcloud/designers please also check it out!

jancborchardt · 2018-10-19T13:22:13Z

For the record, once IE11 is phased out or we drop support for it, we can switch to woff2 as font format: https://caniuse.com/#search=woff2

MorrisJobke · 2018-10-19T13:26:43Z

For the record, once IE11 is phased out or we drop support for it, we can switch to woff2 as font format: https://caniuse.com/#search=woff2

Not going to happen that soon IMO. :/

MorrisJobke · 2018-10-19T13:27:05Z

For the record, once IE11 is phased out or we drop support for it, we can switch to woff2 as font format: https://caniuse.com/#search=woff2

What is wrong with ttf?

jancborchardt · 2018-10-19T14:47:07Z

What is wrong with ttf?

@MorrisJobke according to caniuse:

WOFF: Compressed TrueType/OpenType font that contains information about the font's source.
WOFF2: TrueType/OpenType font that provides better compression than WOFF 1.0.

So quicker loading times. Nunito Regular+Bold in ttf is 230 kB, whereas in woff2 (with latin extended even) it’s 77 kB.

But alas – different topic for a time after IE11. :)

skjnldsv · 2018-10-19T17:23:16Z

Does the browser have a loading preference? If so we should probably keep all of them but in the proper order to make sure the browser try to load the better one? 🤔

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt · 2018-10-19T18:21:35Z

I now added the woff2 format, as is apparently best practice. The code style of the fonts.scss is the same as used by Google Fonts, so should be good.

Ref https://www.w3.org/TR/css-fonts-3/#src-desc about @font-face src:

Its value is a prioritized, comma-separated list of external references or locally-installed font face names. When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate.

Your reviews please @nextcloud/designers :)

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

skjnldsv

Awesome!! Nice that the font loading is prioritised now :)

jancborchardt · 2018-10-23T09:57:25Z

@juliushaertl @karlitschek @MorrisJobke @jospoortvliet so can I have your approving reviews? ;) The +1 does not make the approval process happy. :)

skjnldsv · 2018-10-23T10:41:20Z

@jancborchardt tests failing:

There were 6 errors:

1) Test\Preview\BackgroundCleanupJobTest::testCleanupSystemCron
imagettftext(): Could not find/open font

/drone/src/github.com/nextcloud/server/lib/private/Preview/TXT.php:83
/drone/src/github.com/nextcloud/server/lib/private/Preview/GeneratorHelper.php:59
/drone/src/github.com/nextcloud/server/lib/private/Preview/Generator.php:194
/drone/src/github.com/nextcloud/server/lib/private/Preview/Generator.php:118
/drone/src/github.com/nextcloud/server/lib/private/PreviewManager.php:205
/drone/src/github.com/nextcloud/server/tests/lib/Preview/BackgroundCleanupJobTest.php:104
/drone/src/github.com/nextcloud/server/tests/lib/Preview/BackgroundCleanupJobTest.php:112

2) Test\Preview\BackgroundCleanupJobTest::testCleanupAjax
imagettftext(): Could not find/open font

/drone/src/github.com/nextcloud/server/lib/private/Preview/TXT.php:83
/drone/src/github.com/nextcloud/server/lib/private/Preview/GeneratorHelper.php:59
/drone/src/github.com/nextcloud/server/lib/private/Preview/Generator.php:194
/drone/src/github.com/nextcloud/server/lib/private/Preview/Generator.php:118
/drone/src/github.com/nextcloud/server/lib/private/PreviewManager.php:205
/drone/src/github.com/nextcloud/server/tests/lib/Preview/BackgroundCleanupJobTest.php:104
/drone/src/github.com/nextcloud/server/tests/lib/Preview/BackgroundCleanupJobTest.php:134

3) Test\Preview\TXTTest::testGetThumbnail with data set #0 (-72, -43)
imagettftext(): Could not find/open font

/drone/src/github.com/nextcloud/server/lib/private/Preview/TXT.php:83
/drone/src/github.com/nextcloud/server/tests/lib/Preview/Provider.php:139
/drone/src/github.com/nextcloud/server/tests/lib/Preview/Provider.php:103

4) Test\Preview\TXTTest::testGetThumbnail with data set #1 (73, 5)
imagettftext(): Could not find/open font

/drone/src/github.com/nextcloud/server/lib/private/Preview/TXT.php:83
/drone/src/github.com/nextcloud/server/tests/lib/Preview/Provider.php:139
/drone/src/github.com/nextcloud/server/tests/lib/Preview/Provider.php:103

5) Test\Preview\TXTTest::testGetThumbnail with data set #2 (-14, 91)
imagettftext(): Could not find/open font

/drone/src/github.com/nextcloud/server/lib/private/Preview/TXT.php:83
/drone/src/github.com/nextcloud/server/tests/lib/Preview/Provider.php:139
/drone/src/github.com/nextcloud/server/tests/lib/Preview/Provider.php:103

6) Test\Preview\TXTTest::testGetThumbnail with data set #3 (70, -39)
imagettftext(): Could not find/open font

/drone/src/github.com/nextcloud/server/lib/private/Preview/TXT.php:83
/drone/src/github.com/nextcloud/server/tests/lib/Preview/Provider.php:139
/drone/src/github.com/nextcloud/server/tests/lib/Preview/Provider.php:103

--

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

…regular+bold anyway Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

skjnldsv · 2018-10-23T11:18:09Z

lib/private/Avatar.php

@@ -62,15 +62,15 @@ class Avatar implements IAvatar {

 	/**
 	 * https://github.com/sebdesign/cap-height -- for 500px height
-	 * Open Sans cap-height is 0.72 and we want a 200px caps height size (0.4 letter-to-total-height ratio, 500*0.4=200). 200/0.72 = 278px.
+	 * Nunito cap-height is 0.72 and we want a 200px caps height size (0.4 letter-to-total-height ratio, 500*0.4=200). 200/0.72 = 278px.


Nunito cap-height is 0.73 :)
https://s.codepen.io/skjnldsv/debug/ePLxry/WPkLYNWeKGPM

Really? I just checked with the linked tool and it said 0.7153…

With your updated pen at https://codepen.io/skjnldsv/full/PydLBK/, it says:

Chrome: cap-height of Nunito is 0.7123077184349837

Firefox: cap-height of Nunito is 0.7151666666666667

EDIT: Nope, it's 0.713, so it's fine to leave it at 0.72
https://codepen.io/skjnldsv/pen/PydLBK/

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

jospoortvliet

Awesome! 👍

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv · 2018-10-23T13:05:57Z

Failure unrelated: sh: 1: kill: No such process

MorrisJobke

Looks good 👍

jancborchardt added 3 commits October 19, 2018 12:04

Move fonts from light/semibold to regular/bold for better readability

d9387ad

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Change typeface from Open Sans to Nunito

9d05347

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Text color #222 instead of #000 for better readability

2eceb1a

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt added enhancement design Design, UI, UX, etc. 3. to review Waiting for reviews labels Oct 19, 2018

jancborchardt added this to the Nextcloud 15 milestone Oct 19, 2018

jancborchardt requested review from MorrisJobke, karlitschek, juliusknorr and skjnldsv October 19, 2018 10:29

jancborchardt mentioned this pull request Oct 19, 2018

Default font-weight is too light, almost unreadable #11873

Closed

jancborchardt mentioned this pull request Oct 19, 2018

Round off buttons 'pill style' like on the website #11943

Merged

jancborchardt requested a review from kevgathuku October 19, 2018 16:51

Add woff2 format of Nunito for better performance in modern browsers

c57c9f4

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Use normal text color for sections now that it's not full black

bcce569

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

skjnldsv approved these changes Oct 20, 2018

View reviewed changes

karlitschek approved these changes Oct 23, 2018

View reviewed changes

MariusBluem approved these changes Oct 23, 2018

View reviewed changes

skjnldsv added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Oct 23, 2018

jancborchardt added 5 commits October 23, 2018 13:12

Fix font-face on LDAP tooltip

d9aa484

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Fix font-face in dyslexia-friendly theme

0158703

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Remove font-specifics from high contrast theme because we are now on …

ade50d3

…regular+bold anyway Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Use correct typeface for txt previews

3259d42

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Use correct typeface for avatar generator

354b72b

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

skjnldsv requested changes Oct 23, 2018

View reviewed changes

Fix comment and cap-height

1fb8856

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv approved these changes Oct 23, 2018

View reviewed changes

jospoortvliet approved these changes Oct 23, 2018

View reviewed changes

fixup! Fix comment and cap-height

782927a

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

skjnldsv force-pushed the font-nunito branch from 4e6c8b8 to 782927a Compare October 23, 2018 12:30

skjnldsv added 4. to release Ready to be released and/or waiting for tests to finish and removed 2. developing Work in progress labels Oct 23, 2018

MorrisJobke approved these changes Oct 23, 2018

View reviewed changes

MorrisJobke merged commit 171fe69 into master Oct 23, 2018

MorrisJobke deleted the font-nunito branch October 23, 2018 13:14

jancborchardt mentioned this pull request Oct 23, 2018

Change typeface of HTML mails to Nunito nextcloud/mail#1223

Merged

violoncelloCH mentioned this pull request Oct 26, 2018

Global font - Open Sans - Latin-Extended #11299

Closed

ChristophWurst mentioned this pull request Nov 7, 2018

woff2 missing in nginx config nextcloud/documentation#925

Closed

juliusknorr mentioned this pull request Jan 11, 2019

Heterogeneous fonts in the whole interface #13377

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change typeface to Nunito #11932

Change typeface to Nunito #11932

jancborchardt commented Oct 19, 2018

jospoortvliet commented Oct 19, 2018

skjnldsv commented Oct 19, 2018

MorrisJobke commented Oct 19, 2018

karlitschek commented Oct 19, 2018

jancborchardt commented Oct 19, 2018

jancborchardt commented Oct 19, 2018 •

edited

Loading

MorrisJobke commented Oct 19, 2018

MorrisJobke commented Oct 19, 2018

jancborchardt commented Oct 19, 2018 •

edited

Loading

skjnldsv commented Oct 19, 2018

jancborchardt commented Oct 19, 2018 •

edited

Loading

skjnldsv left a comment

jancborchardt commented Oct 23, 2018

skjnldsv commented Oct 23, 2018 •

edited

Loading

skjnldsv Oct 23, 2018 •

edited

Loading

jancborchardt Oct 23, 2018

jancborchardt Oct 23, 2018 •

edited

Loading

skjnldsv Oct 23, 2018

jospoortvliet left a comment

skjnldsv commented Oct 23, 2018

MorrisJobke left a comment

Change typeface to Nunito #11932

Change typeface to Nunito #11932

Conversation

jancborchardt commented Oct 19, 2018

jospoortvliet commented Oct 19, 2018

skjnldsv commented Oct 19, 2018

MorrisJobke commented Oct 19, 2018

karlitschek commented Oct 19, 2018

jancborchardt commented Oct 19, 2018

jancborchardt commented Oct 19, 2018 • edited Loading

MorrisJobke commented Oct 19, 2018

MorrisJobke commented Oct 19, 2018

jancborchardt commented Oct 19, 2018 • edited Loading

skjnldsv commented Oct 19, 2018

jancborchardt commented Oct 19, 2018 • edited Loading

skjnldsv left a comment

Choose a reason for hiding this comment

jancborchardt commented Oct 23, 2018

skjnldsv commented Oct 23, 2018 • edited Loading

skjnldsv Oct 23, 2018 • edited Loading

Choose a reason for hiding this comment

jancborchardt Oct 23, 2018

Choose a reason for hiding this comment

jancborchardt Oct 23, 2018 • edited Loading

Choose a reason for hiding this comment

skjnldsv Oct 23, 2018

Choose a reason for hiding this comment

jospoortvliet left a comment

Choose a reason for hiding this comment

skjnldsv commented Oct 23, 2018

MorrisJobke left a comment

Choose a reason for hiding this comment

jancborchardt commented Oct 19, 2018 •

edited

Loading

jancborchardt commented Oct 19, 2018 •

edited

Loading

jancborchardt commented Oct 19, 2018 •

edited

Loading

skjnldsv commented Oct 23, 2018 •

edited

Loading

skjnldsv Oct 23, 2018 •

edited

Loading

jancborchardt Oct 23, 2018 •

edited

Loading