Page MenuHomePhabricator

Update fonts on design assets to make Figma files usable across platforms
Closed, DuplicatePublic

Description

Figma supports both local and web fonts. However, the use of local fonts is problematic: users lacking the font in their device are not able to edit any label that is set in those fonts. Currently our design files use Helvetica Neue, this limits the ability for volunteers to participate in the design process, especially on platforms such as Linux or Windows where the font is not included by default.

This ticket proposes to select a font form the webfonts available in Figma and update the design components accordingly. In this way, any Figma user would be able to use our components, or participate in the design process for any of our products regardless of their platform.

Which font to use? Some options:

  • Inter. The look is similar to what users will encounter when using our products in their different platforms (Helvetica, SF, Roboto...). In addition, it is particularly well supported in Figma (e.g., supports super script which is convenient to render content with citations)
  • Noto Sans provide consistency when using (or mixing) different scripts other than Latin. It was on of the recommendations on the typography section of the style guide.
  • Lato was also a recommendation on typography section of the style guide. It has a more distinctive look compared to what users will encounter when using our products in their different platforms (maybe we need to update the style guid recommendation if we go in a different direction).
  • Many more options. Choosing fonts can become an endless discussion, but any webfont would remove the main blocker for people lacking local fonts to participate.

Event Timeline

A few high-level comments:
All three fonts would apply our own guiding font selection criteria:

To select an appropriate font family for a given language script or device, follow these criteria:

Readability. Fonts with a bigger x-height and open shapes are preferred.
Neutral aspect. The font should work with many different kinds of content without adding a particular voice to it.
Simple shapes. Fonts with less complex shapes work better at smaller sizes and on low-resolution devices.
Open. Open source fonts are preferred to align with the open knowledge they deliver.

Figma provides a much better fallback for non-existing fonts than Sketch, leaving the component anatomy (box sizing) pretty much untouched aside of letter box and font size derived rendering.
Here's a comparison of rendering with current desktop 'Helvetica Neue' choice on macOS (sans-serif)

Current Helvetica NeueLato chosenInter chosen
image.png (574×1 px, 44 KB)
image.png (552×984 px, 48 KB)
image.png (594×1 px, 46 KB)

As visible, the 'hug contents' resizing option is providing contributors a sufficient way to use and apply components IMO.

While adding certain scripts like Burmese 'ဖြစ်ပါသည်။' fails in all fonts, Inter, Lato, Noto and Helvetica Neue:

image.png (626×1 px, 38 KB)

In contrast simplified Chinese, rendered in all four choices, here in Inter:

image.png (594×1 px, 43 KB)

Another option for resolving this issue would be to stay on desktop Figma components with 'Helvetica Neue' for Latin/macOS component rendering as an example, while featuring one of the choices Inter, Noto Sans or Lato on mobile to already represent the complexity in the main file. And leave it up to volunteer contributors to choose their fallback or font rendering on desktop.

Also a follow-up task could be to featuring other language scripts besides Latin scripts in our DS component templates.

Either way, we have to clarify the font complexities Wikimedia Foundation is facing with its huge variety of languages and platforms to cater to. Settling on only one font in Figma file might oversimplify these complexities and don't represent the environment we currently have to deal with (mobile Wikipedia & desktop Wikipedia).

Last, if we select one font and don't choose Lato, we would need to update Design Style Guide's webfont choice as well.


Interesting additional resources:
https://help.figma.com/hc/en-us/articles/360040449673-Add-text-in-Chinese-Japanese-and-Korean
https://www.figma.com/blog/when-fonts-fall/

While adding certain scripts like Burmese 'ဖြစ်ပါသည်။' fails in all fonts, Inter, Lato, Noto and Helvetica Neue

Just to clarify. The intent of the proposal is to encourage the use of the webfonts that are available in Figma over local fonts. In the example of Burmese, the recommendation could be to use Noto Sans Myanmar that anyone can use in Figma rather than the local font provided by the user operating system which will prevent users in other platforms to work together. In this way two designers working on a banner for the Burmese Wikipedia would be able to collaborate with no friction each using a different device, both able to tweak the UI components the other creates without issues.

In this scenario, I don't see any reason to recommend or provide components on a Burmese font that is only available on Mac or requires buying a license, installing, etc. (as we do for latin-based languages now).

@bmartinezcalvo @Sarai-WMDE This task has been superseded by T303587 from my point of view. Do you object? If not, I will resolve it.

@bmartinezcalvo @Sarai-WMDE This task has been superseded by T303587 from my point of view. Do you object? If not, I will resolve it.

@Volker_E I agree, this task can be merged with T303587