Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Redesign: Nunito font limited to Latin only #7949

Closed
marxo opened this issue Dec 25, 2018 · 15 comments
Closed

Redesign: Nunito font limited to Latin only #7949

marxo opened this issue Dec 25, 2018 · 15 comments

Comments

@marxo
Copy link

marxo commented Dec 25, 2018

  • Browser: All
  • OS: Any

Description

Nunito font doesn't have glyphs for Cyrillic (I'm assuming other scripts too), leaving Cyrillic text in Arial or other sans-serif fonts.

Steps to reproduce

  • Use Cyrillic in your name, messages or any other place in the UI. Serbian, Russian, Bulgarian translation will manifest this issue.

Log: not sent

@marxo marxo added the redesign label Dec 25, 2018
@archseer
Copy link

Same here, the ž in my name will display with a different, much bolder font. Note that the diacritics (and therefore also ž) are included in the font: https://fonts.google.com/specimen/Nunito

But it seems it was subset to exclude those.

@jxcl
Copy link

jxcl commented Dec 26, 2018

Example boldness in Cyrillic font.

Example

@michaelnew
Copy link

michaelnew commented Dec 26, 2018

This is just personal opinion obviously, but I'd like to vote against using the nunito font at all. Even outside of the missing glyphs, which is obviously a problem, it just looks a bit cartoonish. One of the first impressions I got after opening up /experimental was that I really didn't like the new font (although otherwise I think it looks excellent).

Nunito
image
Helvetica
image

@ara4n
Copy link
Member

ara4n commented Dec 27, 2018

So Nunito has a proper cyrillic variant - we just need to hook it up. https://github.com/alexeiva/NunitoSans/releases/tag/v2.500

However, @michaelnew - your problem is something else; Nunito should not look cartoonish (which I agree it does there, due to the weighting and/or antialiasing being wrong). Precisely what desktop env are you using there, and which version of FF? Have you manually zoomed the window at all, or are you using some other window-rescaling behaviour?

For context, it should look like this:

screenshot 2018-12-27 at 01 08 07

...which hopefully looks much less cartoony.

Even if I zoom things to roughly the same size that you have there, it should still look okay:

screenshot 2018-12-27 at 01 13 02

@michaelnew
Copy link

michaelnew commented Dec 27, 2018

@ara4n Ha, that looks way better. Thanks for the screenshots. Turns out this was definitely on my end.

Apparently I had Nunito installed locally, but only bold/light/regular. I'm not sure what package was responsible for that, but deleting them from /usr/share/fonts/TTF fixed it. It only showed up this way in Firefox (not Chrome) for whatever reason.

Sorry for the noise. Maybe there's some commonly installed package that installs those fonts (I'm on Arch Linux using i3 in case that has anything to do with it), so if anyone else happens to have the same issue hopefully this helps.

Now that the font weights are fixed it looks fantastic. Excited to see the redesign roll out.

@Ai-rin
Copy link

Ai-rin commented Jan 30, 2019

Example of japanese.
screenshot_20190130_193035

@archseer
Copy link

archseer commented Jan 31, 2019

Yeah, anything non-ASCII is broken, not just Cyrillic.

Was subset too much when downloading from google fonts:

https://github.com/matrix-org/matrix-react-sdk/blob/00405e7f2220b7a96f66fe6d51074c248fddf98c/res/themes/dharma/css/_fonts.scss#L3

@ara4n
Copy link
Member

ara4n commented Jan 31, 2019

fixed for cyrillic and vietnamese at least. there simply isn't a Japanese variant of Nunito, so someone will need to propose an alternative font to use there.

@Ai-rin how obnoxious is the one shown in your screenshot? Or should we fall back to Open Sans (the previous font) for non-Latin/Cyrillic/Vietnamese?

@archseer
Copy link

Noto Sans JP is probably a decent alternative. Or you could drop custom fonts and just use system-ui defaults in the design?

@Ai-rin
Copy link

Ai-rin commented Jan 31, 2019

@ara4n Honestly, the previous font was much easier for my eyes and I'd prefer to continue using it for everything (fonts setting in preferences?). So, i vote for Open Sans for now.

@vagnum08
Copy link

Greek is broken too.
It is somehow partially supported.
By partially I mean three letters (Delta, Sigma, Omega and only in capitals).

This leads to funny looking text like nunito
With Open Sans it looked more like this open sans

That said, I vote for Open Sans too.

@Ai-rin
Copy link

Ai-rin commented Feb 20, 2019

Noto Sans works even better: clean look and less eye strain.
I'm using it with riot.im now.

@dimkard
Copy link

dimkard commented Feb 24, 2019

In latest KDE Neon user edition, Nunito not-installed locally, greek letters μ and π are smaller than the other letters. e.g. :

screenshot_20190224_165308

@codic12
Copy link

codic12 commented Apr 24, 2020

I recommend using Fira Sans (or Fira Go, it's fork with support for more languages instead of falling back to another font).

Very nice font, works great!
Or, at least allow the user to change their font.

I used to like Nunito but fira sans is just.. better

@turt2live
Copy link
Member

We replaced the font with Inter.

su-ex added a commit to SchildiChat/element-web that referenced this issue Mar 17, 2022
* Fix a bug where URL previews could be enabled in the left-panel when they
should not have been.
* Add a config.json option to skip the built-in Jitsi welcome screen ([\element-hq#21190](element-hq#21190)).
* Add unexposed account setting for hiding poll creation ([\#7972](matrix-org/matrix-react-sdk#7972)).
* Allow pinning polls ([\element-hq#7922](matrix-org/matrix-react-sdk#7922)). Fixes element-hq#20152.
* Make trailing `:` into a setting ([\element-hq#6711](matrix-org/matrix-react-sdk#6711)). Fixes element-hq#16682. Contributed by @SimonBrandner.
* Location sharing > back button ([\element-hq#7958](matrix-org/matrix-react-sdk#7958)).
* use LocationAssetType ([\element-hq#7965](matrix-org/matrix-react-sdk#7965)).
* Location share type UI ([\element-hq#7924](matrix-org/matrix-react-sdk#7924)).
* Add a few more UIComponent flags, and ensure they are used in existing code ([\element-hq#7937](matrix-org/matrix-react-sdk#7937)).
* Add support for overriding strings in the app ([\element-hq#7886](matrix-org/matrix-react-sdk#7886)).
* Add support for redirecting to external pages after logout ([\element-hq#7905](matrix-org/matrix-react-sdk#7905)).
* Expose redaction power level in room settings ([\element-hq#7599](matrix-org/matrix-react-sdk#7599)). Fixes element-hq#20590. Contributed by @SimonBrandner.
* Update and expand ways to access pinned messages ([\#7906](matrix-org/matrix-react-sdk#7906)). Fixes element-hq#21209 and element-hq#21211.
* Add slash command to switch to a room's virtual room ([\element-hq#7839](matrix-org/matrix-react-sdk#7839)).
* Remove Lojban translation ([\element-hq#21302](element-hq#21302)).
* Merge pull request from GHSA-qmf4-7w7j-vf23 ([\element-hq#8059](matrix-org/matrix-react-sdk#8059)).
* Add another null guard for member ([\element-hq#7984](matrix-org/matrix-react-sdk#7984)). Fixes element-hq#21319.
* Fix room account settings ([\element-hq#7999](matrix-org/matrix-react-sdk#7999)).
* Fix missing summary text for pinned message changes ([\element-hq#7989](matrix-org/matrix-react-sdk#7989)). Fixes element-hq#19823.
* Pass room to getRoomTombstone to avoid racing with setState ([\element-hq#7986](matrix-org/matrix-react-sdk#7986)).
* Hide composer and call buttons when the room is tombstoned ([\element-hq#7975](matrix-org/matrix-react-sdk#7975)). Fixes element-hq#21286.
* Fix bad ternary statement in autocomplete user pill insertions ([\element-hq#7977](matrix-org/matrix-react-sdk#7977)). Fixes element-hq#21307.
* Fix sending locations into threads and fix i18n ([\element-hq#7943](matrix-org/matrix-react-sdk#7943)). Fixes element-hq#21267.
* Fix location map attribution rendering over message action bar ([\element-hq#7974](matrix-org/matrix-react-sdk#7974)). Fixes element-hq#21297.
* Fix wrongly asserting that PushRule::conditions is non-null ([\element-hq#7973](matrix-org/matrix-react-sdk#7973)). Fixes element-hq#21305.
* Fix account & room settings race condition ([\element-hq#7953](matrix-org/matrix-react-sdk#7953)). Fixes element-hq#21163.
* Fix bug with some space selections not being applied ([\element-hq#7971](matrix-org/matrix-react-sdk#7971)). Fixes element-hq#21290.
* Revert "replace all require(.svg) with esm import" ([\element-hq#7969](matrix-org/matrix-react-sdk#7969)). Fixes element-hq#21293.
* Hide unpinnable pinned messages in more cases ([\element-hq#7921](matrix-org/matrix-react-sdk#7921)).
* Fix room list being laggy while scrolling 🐌 ([\element-hq#7939](matrix-org/matrix-react-sdk#7939)). Fixes element-hq#21262.
* Make pinned messages more reliably reflect edits ([\element-hq#7920](matrix-org/matrix-react-sdk#7920)). Fixes element-hq#17098.
* Improve accessibility of the BetaPill ([\element-hq#7949](matrix-org/matrix-react-sdk#7949)). Fixes element-hq#21255.
* Autofocus correct composer after sending reaction ([\element-hq#7950](matrix-org/matrix-react-sdk#7950)). Fixes element-hq#21273.
* Consider polls as message events for rendering redactions ([\element-hq#7944](matrix-org/matrix-react-sdk#7944)). Fixes element-hq#21125.
* Prevent event tiles being shrunk/collapsed by flexbox ([\element-hq#7942](matrix-org/matrix-react-sdk#7942)). Fixes element-hq#21269.
* Fix ExportDialog title on export cancellation ([\element-hq#7936](matrix-org/matrix-react-sdk#7936)). Fixes element-hq#21260. Contributed by @luixxiul.
* Mandate use of js-sdk/src/matrix import over js-sdk/src ([\element-hq#7933](matrix-org/matrix-react-sdk#7933)). Fixes element-hq#21253.
* Fix backspace not working in the invite dialog ([\element-hq#7931](matrix-org/matrix-react-sdk#7931)). Fixes element-hq#21249. Contributed by @SimonBrandner.
* Fix right panel soft crashes due to missing room prop ([\element-hq#7923](matrix-org/matrix-react-sdk#7923)). Fixes element-hq#21243.
* fix color of location share caret ([\element-hq#7917](matrix-org/matrix-react-sdk#7917)).
* Wrap all EventTiles with a TileErrorBoundary and guard parsePermalink ([\element-hq#7916](matrix-org/matrix-react-sdk#7916)). Fixes element-hq#21216.
* Fix changing space sometimes bouncing to the wrong space ([\element-hq#7910](matrix-org/matrix-react-sdk#7910)). Fixes element-hq#20425.
* Ensure EventListSummary key does not change during backpagination ([\element-hq#7915](matrix-org/matrix-react-sdk#7915)). Fixes element-hq#9192.
* Fix positioning of the thread context menu ([\element-hq#7918](matrix-org/matrix-react-sdk#7918)). Fixes element-hq#21236.
* Inject sender into pinned messages ([\element-hq#7904](matrix-org/matrix-react-sdk#7904)). Fixes element-hq#20314.
* Tweak info message padding in right panel timeline ([\#7901](matrix-org/matrix-react-sdk#7901)). Fixes element-hq#21212.
* Fix another freeze on room switch ([\#7900](matrix-org/matrix-react-sdk#7900)). Fixes element-hq#21127.
* Fix out of memory error when failing to acquire location ([\element-hq#7902](matrix-org/matrix-react-sdk#7902)). Fixes element-hq#21213.
* Fix edge case in context menu chevron positioning ([\element-hq#7899](matrix-org/matrix-react-sdk#7899)).
* Fix composer format buttons on WebKit ([\element-hq#7898](matrix-org/matrix-react-sdk#7898)). Fixes element-hq#20868.
* manage voicerecording state when deleting or sending a voice message ([\element-hq#7896](matrix-org/matrix-react-sdk#7896)). Fixes element-hq#21151.
* Fix bug with useRoomHierarchy tight-looping loadMore on error ([\element-hq#7893](matrix-org/matrix-react-sdk#7893)).
* Fix upload button & shortcut not working for narrow composer mode ([\element-hq#7894](matrix-org/matrix-react-sdk#7894)). Fixes element-hq#21175 and element-hq#21142.
* Fix emoji insertion in thread composer going to the main composer ([\element-hq#7895](matrix-org/matrix-react-sdk#7895)). Fixes element-hq#21202.
* Try harder to keep context menus inside the window ([\element-hq#7863](matrix-org/matrix-react-sdk#7863)). Fixes element-hq#17527 and element-hq#18377.
* Fix edge case around event list summary layout ([\element-hq#7891](matrix-org/matrix-react-sdk#7891)). Fixes element-hq#21180.
* Fix event list summary 1 hidden message pluralisation ([\element-hq#7890](matrix-org/matrix-react-sdk#7890)). Fixes element-hq#21196.
* Fix vanishing recently viewed menu ([\element-hq#7887](matrix-org/matrix-react-sdk#7887)). Fixes element-hq#20827.
* Fix freeze on room switch ([\element-hq#7884](matrix-org/matrix-react-sdk#7884)). Fixes element-hq#21127.
* Check 'useSystemTheme' in quick settings theme switcher ([\element-hq#7809](matrix-org/matrix-react-sdk#7809)). Fixes element-hq#21061.
* Fix 'my threads' filtering to include participated threads ([\element-hq#7882](matrix-org/matrix-react-sdk#7882)). Fixes element-hq#20877.
* Remove log line to try to fix freeze on answering VoIP call ([\element-hq#7883](matrix-org/matrix-react-sdk#7883)).
* Support social login & password on soft logout page ([\element-hq#7879](matrix-org/matrix-react-sdk#7879)). Fixes element-hq#21099.
* Fix missing padding on server picker ([\element-hq#7864](matrix-org/matrix-react-sdk#7864)).
* Throttle RoomState.members handlers ([\element-hq#7876](matrix-org/matrix-react-sdk#7876)). Fixes element-hq#21127.
* Only show joined/invited in search dialog ([\element-hq#7875](matrix-org/matrix-react-sdk#7875)). Fixes element-hq#21161.
* Don't pillify code blocks ([\element-hq#7861](matrix-org/matrix-react-sdk#7861)). Fixes element-hq#20851 and element-hq#18687.
* Fix keyboard shortcut icons on macOS ([\element-hq#7869](matrix-org/matrix-react-sdk#7869)).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests