Inter UI Font Family #1402

cchaos · 2019-01-03T19:28:00Z

This PR adds the Inter UI font family to the font family stack. It links to a .css that then links to the actual font files. I've also added a few more font weights as well (making sure the K6 theme remained the same).

Before and after

K6 theme (should look the same)

IE

Even IE looks better

Checklist

This was checked in mobile
This was checked in IE11
This was checked in dark mode
~~- [ ] Any props added have proper autodocs~~
Documentation examples were added
A changelog entry exists and is marked appropriately
~~- [ ] This was checked for breaking changes and labeled appropriately~~
~~- [ ] Jest tests were updated or added to match the most common scenarios~~
~~- [ ] This was checked against keyboard-only and screenreader scenarios~~
~~- [ ] This required updates to Framer X components~~

snide · 2019-01-03T20:46:30Z

For designers.... pease leave a comment saying you are either OK with this, or are aware of it and will commit to managing your own theme for a font-change.

re: from our meeting today. Setting up all the designers as a reviewer on this. There's still work to do on the PR (figuring out code fonts), but I want to make sure everyone is aware and OK with us making this kind of change to EUI master.

What this means

EUI master will use Inter UI as a font rather than the system stack
This will not effect 6.x kibana because it has its own theme using Open sans.
K7 will drop the theme and start using EUI master, we'll manually add Inter UI font files similar to open sans to master in Kibana but not backport it to 6.x. Dashboards might have small breaks because of font sizing differences and screenshot tests might need to be updated.
Anyone else using EUI master will need to decide if they should overwrite the usage (by changing the font families locally in their app) or adopting Inter UI. This could effect Cloud and Swiftype UIs.

What would be nice

I'd love us to all use the same thing if possible and that you don't make a font theme. It just makes maintenance much easier. Kibana requires SOME sort of font decision because its content is often user-defined and absolute heights and widths depend on it (which leads to breaks from browser to browser).

cc @timroes, @epixa and @stacey-gammon for visibility.

ryankeairns · 2019-01-03T21:04:49Z

LGTM, very similar font yet more readable.

gjones · 2019-01-03T21:05:55Z

If we're moving to Inter UI then I think we'll probably be ok with it in Cloud as it's similar enough to SF.

As a side note of little consequence, I think my personal opinion is that EUI, as an open source framework, certainly can and should have a default font, but should also allow users to easily opt out of that default and fall back to system fonts.

snide · 2019-01-03T21:09:07Z

As a side note of little consequence, I think my personal opinion is that EUI, as an open source framework, certainly can and should have a default font, but should also allow users to easily opt out of that default and fall back to system defaults.

Yep, for those that need to simply changing the following variables would do it. I think that's fairly painless, but it is something we might want to mention in the readme.

$euiFontFamily: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
$euiCodeFontFamily: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !default;

snide · 2019-01-03T21:11:43Z

src/global_styling/variables/_typography.scss

@@ -1,8 +1,11 @@
+// sass-lint:disable no-url-domains, no-url-protocols
+
+@import url('https://rsms.me/inter/inter-ui.css');


Unfortunately we can't do this. It won't work in Kibana. We should just include a <link> stylesheet in the EUI docs and document how to include it. Users that don't have it will fall back to system fonts per the font stack.

On the Kibana side we'll manually add the physical font files to the build there.

I move the CSS import, but I'm stumped on where to document how to add them.

ce10a30#diff-227845547db976d1b4acdc5a25f22189

I think the consuming EUI doc is the most likely candidate.

https://github.com/elastic/eui/blob/master/wiki/consuming.md

zumwalt

LGTM. We will likely override with system fonts in Swiftype until we can spend some time adjusting non-EUI things.

src/global_styling/variables/_typography.scss

stacey-gammon · 2019-01-03T23:32:26Z

Has anyone tested this change with reporting? I just know we had issues before with fonts and reporting, so might be worthwhile to make sure this runs correctly when the kibana server is running on linux, or a system with possibly fewer font packages installed, and compare the output from the browser to what is generated in the font.

cchaos · 2019-01-04T00:15:15Z

@stacey-gammon, Kibana will still run on Open Sans for the time being. Since Open Sans is not a font family that's distributed with any OS's, what does reporting currently use for fonts? I would think this would behave the same way just with a different "preferred" font, but will fallback to any system fonts declared.

src/global_styling/mixins/_typography.scss

cchaos · 2019-01-04T21:45:02Z

Added iA Writer as mono font:

cchaos · 2019-01-04T22:48:59Z

Ha, faked you out, using Roboto Mono instead

timroes · 2019-01-10T18:28:14Z

Pinging @joelgriffith and @tsullivan regarding reporting on this one. Even though that won't immediately change anything around reporting just merging that in, I wanted to rise awareness of that upcoming change in Kibana potentially. Also I think this should make things better for reporting, since we should not be so much dependent on local installed fonts anymore?

joelgriffith · 2019-01-10T23:55:34Z

Thanks @timroes for pointing this out. I think the only issue is that having some OS font installed is still a requirement, otherwise Chromium panics and fails to start.

That being said it'll hopefully make delta tests and consistency much better now

tsullivan · 2019-01-11T20:12:58Z

I agree with @joelgriffith on this. When fonts are the cause of the failure, as I've seen it, it's because the OS doesn't have a "default" font registered. Installing the dependent packages takes care of that.

snide · 2019-01-11T20:40:15Z

Just to set a gameplan for this for everyone. Let's assume design will merge this next week (which shouldn't effect K6 kibana) but will effect Clould (cc @gjones). Then we'll make a change to master Kibana so this is a default we have available for testing purposes. We'll try to plan this around the new nav going in so that tests (if they break) will be all at once and we'll still have the months till 7.0 GA to address them.

Give a yell if that does not sound good.

snide

Small suggestion to docs. I might suggest including something similar in the fonts stack section of the Sass guidelines page.

wiki/consuming.md

plus some color alterations

…ocs only

cchaos added design decision style only labels Jan 3, 2019

snide requested review from gjones, formgeist, zumwalt, daveyholler and ryankeairns January 3, 2019 20:35

snide reviewed Jan 3, 2019

View reviewed changes

zumwalt approved these changes Jan 3, 2019

View reviewed changes

gjones approved these changes Jan 3, 2019

View reviewed changes

cchaos commented Jan 3, 2019

View reviewed changes

src/global_styling/variables/_typography.scss Outdated Show resolved Hide resolved

formgeist reviewed Jan 4, 2019

View reviewed changes

src/global_styling/mixins/_typography.scss Outdated Show resolved Hide resolved

snide approved these changes Jan 16, 2019

View reviewed changes

wiki/consuming.md Outdated Show resolved Hide resolved

cchaos added 5 commits January 16, 2019 15:05

Inter-ui

2cfaea4

plus some color alterations

Some fixes based on new font

2c924bd

Update to latest beta thin fonts

06678e1

Fix up K6 font overrides

956280b

Fix IE

e46b308

cchaos added 8 commits January 16, 2019 15:05

update sass doc

33bbc91

cl

a1f64b4

remove SF from mono

19b8d6d

Remove extra light weight

195be98

Added iA Writer mono for mono space and moved @font-face css to src-d…

d2d9d4d

…ocs only

Nope — Roboto Mono

f97408d

consuming doc update

ea7cd23

Fixing console errors in SASS docs page

136638f

cchaos force-pushed the inter-ui branch from 3a837bb to 136638f Compare January 16, 2019 20:07

Update consuming.md

f1afe3e

cchaos merged commit 0b6110e into elastic:master Jan 16, 2019

cchaos deleted the inter-ui branch January 16, 2019 20:44

snide mentioned this pull request Jan 18, 2019

EUI 6.5.1 elastic/kibana#28970

Merged

formgeist mentioned this pull request Feb 1, 2019

[APM] Typography fixes for new EUI font and sizes elastic/kibana#29824

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Inter UI Font Family #1402

Inter UI Font Family #1402

cchaos commented Jan 3, 2019 •

edited

Loading

snide commented Jan 3, 2019 •

edited

Loading

ryankeairns commented Jan 3, 2019

gjones commented Jan 3, 2019 •

edited

Loading

snide commented Jan 3, 2019

snide Jan 3, 2019 •

edited

Loading

snide Jan 3, 2019

cchaos Jan 4, 2019

snide Jan 4, 2019

zumwalt left a comment

stacey-gammon commented Jan 3, 2019

cchaos commented Jan 4, 2019

cchaos commented Jan 4, 2019

cchaos commented Jan 4, 2019

timroes commented Jan 10, 2019

joelgriffith commented Jan 10, 2019

tsullivan commented Jan 11, 2019

snide commented Jan 11, 2019

snide left a comment

		@@ -1,8 +1,11 @@
		// sass-lint:disable no-url-domains, no-url-protocols

		@import url('https://rsms.me/inter/inter-ui.css');

Inter UI Font Family #1402

Inter UI Font Family #1402

Conversation

cchaos commented Jan 3, 2019 • edited Loading

Before and after

Checklist

snide commented Jan 3, 2019 • edited Loading

What this means

What would be nice

ryankeairns commented Jan 3, 2019

gjones commented Jan 3, 2019 • edited Loading

snide commented Jan 3, 2019

snide Jan 3, 2019 • edited Loading

Choose a reason for hiding this comment

snide Jan 3, 2019

Choose a reason for hiding this comment

cchaos Jan 4, 2019

Choose a reason for hiding this comment

snide Jan 4, 2019

Choose a reason for hiding this comment

zumwalt left a comment

Choose a reason for hiding this comment

stacey-gammon commented Jan 3, 2019

cchaos commented Jan 4, 2019

cchaos commented Jan 4, 2019

cchaos commented Jan 4, 2019

timroes commented Jan 10, 2019

joelgriffith commented Jan 10, 2019

tsullivan commented Jan 11, 2019

snide commented Jan 11, 2019

snide left a comment

Choose a reason for hiding this comment

cchaos commented Jan 3, 2019 •

edited

Loading

snide commented Jan 3, 2019 •

edited

Loading

gjones commented Jan 3, 2019 •

edited

Loading

snide Jan 3, 2019 •

edited

Loading