Page MenuHomePhabricator

Use device default font for Wikipedia preview
Closed, ResolvedPublic

Description

Background

To keep Wikipedia preview experience simple and consistent use fonts that are already available on each device and operating system.

Request

Update CSS code to rely on operating system's default sans-serif typeface.

Note: This link has a sample CSS code and more information on our typography related principals.
https://design.wikimedia.org/style-guide/visual-style_typography.html

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 14 2020, 8:04 AM
AMuigai moved this task from Backlog to Q2-2020 on the Inuka-Team board.Aug 17 2020, 5:47 PM
AMuigai moved this task from Q2-2020 to Kanban on the Inuka-Team board.Aug 20 2020, 1:16 PM
AMuigai edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
AMuigai moved this task from Kanban to Q2-2020 on the Inuka-Team board.Aug 20 2020, 1:20 PM
AMuigai edited projects, added Inuka-Team; removed Inuka-Team (Kanban).

Update CSS code to rely on operating system's default sans-serif typeface.

@SGautam_WMF are you saying that ALL text (article text, image caption, CTAs, links, etc) should be font-family: sans-serif? In other words, we let the browser use its default font but we really want the sans-serif variant?

This Design Style Guide shows the font-family style, do you mean like we apply this to the entire Wikipedia Preview?

/**
 * System font stack for sans-serif fonts
 *
 * `-apple-system` ('San Francisco' font) – Support Safari 9+ macOS and iOS, Firefox macOS
 * `BlinkMacSystemFont` ('San Francisco' font) – Chrome 48+ macOS and iOS
 * `Segoe UI` – Windows Vista & newer
 * `Roboto` – Android 4.0+
 * `Lato` – Wikimedia Design choice, OFL licensed
 * `Helvetica, Arial, sans-serif` – (Generic) Web fallback
 * Note that standard `system-ui` value has resulted in unresolved side-effects in certain OS/language combinations as of now and is therefore not included.
 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Lato, Helvetica, Arial, sans-serif;

This Design Style Guide shows the font-family style, do you mean like we apply this to the entire Wikipedia Preview?

Yes, that's my understanding from the guide. We should be able to set it once and have it apply to the entire Preview.

SBisson claimed this task.Sep 29 2020, 2:29 PM
SBisson edited projects, added Inuka-Team (Kanban); removed Inuka-Team.
SBisson moved this task from Backlog to Dev on the Inuka-Team (Kanban) board.

Yes, apply device default to the entire Wikipedia preview.

SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Oct 1 2020, 2:17 PM
Jpita added a subscriber: Jpita.

@SGautam_WMF is the font type the same in 1 and 2? It seems a bit different to me

@Jpita "1" is the demo site, it represents the partners' site. Its style is independent from Wikipedia Preview.

@Jpita "1" is the demo site, it represents the partners' site. Its style is independent from Wikipedia Preview.

Ah ok, was thinking everything should look the same, my bad.

AMuigai closed this task as Resolved.Oct 5 2020, 10:51 AM