Page MenuHomePhabricator

Define the system's sans, serif and monospace typefaces
Closed, ResolvedPublic

Description

Background/Goal

We need to define and document the sans, serif and monospace typefaces of Codex's font styles for its Figma design specifications.

Some facts and requirements to consider:

  • The current font stacks used in production prioritize system fonts and browser defaults for performance and practicality reasons. These cannot be updated to reflect design decisions.
  • In Figma, we'd like to use typefaces that:
  1. Are not too visually different from what users will experience (i.e. we should select a font that is similar to the common OS defaults)
  2. Are part of the default Figma font stack (in order to remove the barrier for contributors, regardless of their operative system or available local fonts) (See task "Update fonts on design assets to make Figma files usable across platforms")
  3. Allow us to work with a variety of non-latin scripts (See task "Choose typographies for designing our text styles in Figma in different languages") - This issue is solved thanks to Figma's capability to replace missing characters using Noto Sans as a fallback

Suggestion for typefaces choice

The current suggestion, which resulted from a discussion in the task above, is:

  • using Inter as our sans font,
  • Source Serif Pro as our serif font and
  • Fira Code as our monospace font.

Unfortunately, this will create a discrepancy between the text styles used in our design library and the CSS font stacks that will become apparent on inspection.

Acceptance criteria for Done

  • We know which typeface to apply to the different sans, serif and monospace to text styles in Figma
  • Codex Figma documentation represents our choices and documents main ideas behind decision

Historic/prior work

Related Objects

StatusSubtypeAssignedTask
Duplicate STH
InvalidNone
ResolvedVolker_E
ResolvedNone
Resolvedbmartinezcalvo
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolvedldelench_wmf
ResolvedVolker_E
Resolved EUdoh-WMF
Resolved Sarai-WMDE
Resolved DAbad
ResolvedVolker_E
Resolvedbmartinezcalvo
Resolved KieranMcCann
OpenNone
DuplicateNone
ResolvedVolker_E
Resolved Sarai-WMDE
Resolved Catrope
OpenNone
Resolvedovasileva
ResolvedBUG REPORTVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolved Sarai-WMDE
ResolvedVolker_E
Resolvedbmartinezcalvo
Resolved Catrope
Resolved DAbad
ResolvedVolker_E

Event Timeline

Sarai-WMDE renamed this task from Define the system's typefaces to Define the system's sans, serif and monospace typefaces.Apr 12 2022, 10:39 AM
Sarai-WMDE created this task.
STH triaged this task as High priority.May 1 2022, 1:20 PM
  • We know which typeface to apply to the different sans, serif and monospace to text styles in Figma

The first acceptance criterion can be considered done after the Pattern Lab and Product design teams over at WMF and WMDE agreed with the following proposal of typefaces to use with Figma font styles:

  • Use Inter as our sans font,
  • Use Source Serif Pro as our serif font
  • Use Fira Code as our monospace font

The selected fonts satisfy the following requirements:

  1. They are visually neutral and don't represent a departure from the common typefaces that users will see in production (i.e. common OS/ browser defaults).
  1. They'll keep our designs accessible to collaborators, regardless of the operating system they use or the local fonts they have available: 
Inter, Source Serif Pro and Fira Code are part of the default font stack that Figma makes available in Windows, MacOS and Linux.
  1. Allow us to work with non-latin scripts: With their large amount of glyphs, the fonts offer good support for Latin, Cyrillic and Greek scripts. They make it possible to work with RTL languages and additional scripts thanks to Figma fallbacks (to Noto Sans).

Important notes:

  1. None of the selected typefaces are part of our CSS font stack (yet): The fonts used in our designs and component library won't match their corresponding token value (at least until the CSS stack is potentially updated to symbolically reflect these design choices, see T309158). We decided to use fonts that are not part of the CSS stack in favor of keeping our library open to collaborators, after finding that only two of our CSS fonts (Lato and Roboto – which don't have a neutral enough look, see criterion #1) were available in Figma in all platforms (which doesn't satisfy criteria #2). See the table below for more details. We are aware that this discrepancy could create handover friction. We'll try to alleviate said friction as much as possible by providing a heads-up and indicating the right token in Figma.
  1. As mentioned, Figma applies a fallback font (Noto Sans) whenever a given typeface cannot provide the necessary glyphs. Nevertheless, there are some scripts (e.g. Burmese) that are not covered by default by Noto Sans, and that will require a manual replacement by the corresponding Noto font (e.g. Noto Sans Myanmar). We'll have to make this explicit in our Figma documentation (See third AC). We could, for example, add an Internationalization section in our Typography guidelines, and provide a list of languages that don't have a direct fallback in Figma, together with the specific Noto font that renders them. A similar note could also be added in the Style guide if necessary.

Annex: OS compatibility of Figma fonts

Evaluated typefaces 👇🏻Part of wm-ui-base CSS font stackAvailable in Figma/MacOSAvailable in Figma/WindowsAvailable in Figma/Linux (Ubuntu)
Linux Libertine (serif)
Charter (serif)
Georgia (serif)
Times (serif)
Roboto (sans)
Lato (sans)
Helvetica (sans)
Arial (sans)
Menlo (monospace)
Consolas (monospace)
Liberation mono (monospace)
Courier New (monospace)
Source Serif Pro (serif)
Inter (sans)
Fira Code (monospace)

Regarding the third acceptance criterion:

  • Codex Figma documentation represents our choices and documents main ideas behind decision

The typeface choices were documented together with a summary of the reasons for their selection in the typography exploration file in Figma. Please @bmartinezcalvo and @Volker_E, let me know if you find the information included in that section clear and sufficient.

Regarding the second acceptance criterion:

  • Codex Figma resources are updated only relying on choices above

With your permission, I'd like to remove this criterion and open a separate task based on it to 'Create text styles in Figma and apply them to Codex components'. Updating only the typefaces used by the Figma library components right now would be an overhead, since we'll have to apply entire Figma text styles once these are documented. What do you think?

Regarding the third acceptance criterion:

  • Codex Figma documentation represents our choices and documents main ideas behind decision

The typeface choices were documented together with a summary of the reasons for their selection in the typography exploration file in Figma. Please @bmartinezcalvo and @Volker_E, let me know if you find the information included in that section clear and sufficient.

@Sarai-WMDE I've leave you a couple of comments in Figma:

  1. I would add more info about why Figma and CSS fonts don't match and why in production we use system fonts.
  2. I would add more info about when we use each typeface (Titles/text/code text)

Regarding the second acceptance criterion:

  • Codex Figma resources are updated only relying on choices above

With your permission, I'd like to remove this criterion and open a separate task based on it to 'Create text styles in Figma and apply them to Codex components'. Updating only the typefaces used by the Figma library components right now would be an overhead, since we'll have to apply entire Figma text styles once these are documented. What do you think?

@Sarai-WMDE I would resolve this task and I would create the text styles in Figma in this other task T296998 (creating the text styles with the right font, size and line height). About applying the styles in our Figma components, we have this open task T295606.

@Sarai-WMDE I've leave you a couple of comments in Figma:

  1. I would add more info about why Figma and CSS fonts don't match and why in production we use system fonts.
  2. I would add more info about when we use each typeface (Titles/text/code text)

Thanks for the great feedback! The comments were addressed.

@Sarai-WMDE I would resolve this task and I would create the text styles in Figma in this other task T296998 (creating the text styles with the right font, size and line height). About applying the styles in our Figma components, we have this open task T295606.

Makes total sense. I'll remove that AC from here and include an AC to create Figma text styles in T296998. I think that the application of text styles to components is captured in T295606, as you mentioned 👍🏻

The typefaces' proposal was presented to the Product design team, and shared and reviewed by the members of the Pattern lab team. Feedback was received and acted upon. The current documentation in Figma (access the Typography exploration file here) will need to be adjusted in case we decide to update the CSS font stack to reflect the latest design choices. This possibility is captured in T309158: Update Wikimedia Design Style Guide with typeface choices.

DAbad claimed this task.
DAbad subscribed.

closed