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

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 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.

Jpita subscribed.

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

image.png (1×758 px, 535 KB)

@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.