Change Details

== Proposal update the font-stack for Wikimedia Style Guide which gives preference to system typeface Apple and Google both have better typeface alternatives available. [1][2] They have better readability on screens and they have better language support. This will deliver better native experience for readers. [3] Proposed stack (see discussion for other links/suggestions) ```lang=css font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Lato, "Oxygen-Sans", Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif; ``` This is the semantic order of things - User device system preferred > Wikimedia Design preferred (Lato) > Helvetica > Arial > Generic [1] https://developer.apple.com/fonts/ [2] a https://fonts.google.com/specimen/Roboto [2] b https://material.io/guidelines/style/typography.html == Developer note There's a [[ https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f | known bug for Internet Explorer/Edge ]] with this stack when used in `font` shorthand. Can be circumvented when used only with `font-family`.

== Proposal update the font-stack for Wikimedia Style Guide which gives preference to system typeface Apple and Google both have better typeface alternatives available. [1][2] They have better readability on screens and they have better language support. This will deliver better native experience for readers. [3] Proposed stack (see discussion for other links/suggestions) ```lang=css font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; ``` This is the semantic order of things - User device system preferred > Wikimedia Design preferred (Lato) > Helvetica > Arial > Generic [1] https://developer.apple.com/fonts/ [2] a https://fonts.google.com/specimen/Roboto [2] b https://material.io/guidelines/style/typography.html == Developer note There's a [[ https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f | known bug for Internet Explorer/Edge ]] with this stack when used in `font` shorthand. Can be circumvented when used only with `font-family`.

== Proposal update the font-stack for Wikimedia Style Guide which gives preference to system typeface Apple and Google both have better typeface alternatives available. [1][2] They have better readability on screens and they have better language support. This will deliver better native experience for readers. [3] Proposed stack (see discussion for other links/suggestions) ```lang=css font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Lato"Oxygen-Sans", "Oxygen-Sans"Ubuntu, UbuntuCantarell, CantarellLato, "Helvetica Neue", Helvetica, Arial, sans-serif; ``` This is the semantic order of things - User device system preferred > Wikimedia Design preferred (Lato) > Helvetica > Arial > Generic [1] https://developer.apple.com/fonts/ [2] a https://fonts.google.com/specimen/Roboto [2] b https://material.io/guidelines/style/typography.html == Developer note There's a [[ https://booking.design/implementing-system-fonts-on-booking-com-a-lesson-learned-bdc984df627f | known bug for Internet Explorer/Edge ]] with this stack when used in `font` shorthand. Can be circumvented when used only with `font-family`.