Page MenuHomePhabricator

Use Wikimedia Design Style Guide font choice of serif in print styles
Open, NormalPublic

Description

According to Wikimedia Design Style Guide, Foundation's choice of open source serif typeface is Charter.
https://design.wikimedia.org/style-guide/visual-style_typography.html

More info on charter
http://practicaltypography.com/charter.html
Web font -

To experiment with the new open typeface, we would like to use Charter as body typeface for print styles.
Though charter has a wide support for many scripts, we should be cautious and use it only for latin scripts to begin with. we can extend the support later

AC

  • Deliver web font for printing
  • Only body:en should get charter typeface

Related Objects

StatusAssignedTask
OpenJKatzWMF
OpenNone
DuplicateNone
OpenJKatzWMF
OpenNone
OpenNone
Resolvedpmiazga
InvalidNone
OpenNone
Resolvedovasileva
InvalidNone
Resolvedphuedx
OpenNone
InvalidNone
InvalidNone
DuplicateNone
InvalidNone
Resolved dpatrick
InvalidNone
ResolvedJdlrobson
OpenNone
DuplicateNone
ResolvedNirzar
ResolvedNirzar
OpenNone
Declinedmobrovac
StalledJdlrobson
DeclinedNone
StalledNirzar
ResolvedNirzar
OpenNirzar
ResolvedNirzar
Resolvedovasileva
ResolvedABorbaWMF
Resolvedovasileva
DeclinedNone
ResolvedABorbaWMF

Event Timeline

Nirzar created this task.Jul 5 2017, 11:13 PM
matmarex added a subscriber: matmarex.EditedJul 7 2017, 1:17 PM

Charter appears to have extremely poor support for non-English text. I installed it locally from the site you linked and tried with the Polish test sentence "Zażółć gęślą jaźń." – out of the 9 accented characters in Polish, only 2 are supported ("ó" and "ł"). I think this is entirely hopeless.

If it is actually "Foundation's choice of open source serif typeface", then I am very disappointed. This choice is not inclusive of our non-English communities. I urge you to reconsider it.

Nirzar added a comment.Jul 7 2017, 4:36 PM

@matmarex

can you use this version?


Charis is a font version of Charter typeface

here are supported charatcters in Charis
https://www.fontsquirrel.com/fonts/charis-sil

That's better, yes. The styleguide only mentions Charis as an alternative, and not as the recommendation.

This font has some rendering and kerning issues, though. It looks more "bold" too.


(note the 'd's)


(note the 'g' in 'big')

Nirzar added a comment.Jul 7 2017, 6:10 PM

@matmarex we will try to fix as much kerning as possible. I will look for kerning tables.

I'm also inclined towards creating our version of Charter eventually. till then... Charis should work.

Apart from the drawbacks you mentioned, I would like mention that Charis renders amazingly at the sizes we want it to render. the readability doesn't take a hit at 10pt print. That being a major reason for this choice. Not to mention the overall aesthetics fit right into Foundation's Visual Design Principles

Nirzar added a comment.Jul 7 2017, 6:23 PM

Actually I checked and it does have the kerning table. it depends on the client of the font. most browsers and printers do take the kerning tables in account.
this is what i see if i simply type text in charter and charis.

Can you type the same sentence below it with your system serif using the same tool?

Here's a pdf generated with Charis SIL

English -

Polish -

Ignore the styling issues in some parts of the PDF as this is a WIP css. but you can look at the body text compatibility.

Thank you for looking into this!

Nirzar updated the task description. (Show Details)Jul 8 2017, 12:13 AM

This needs a bit more thought about how we are going to serve the webfont. Let me investigate before we commit to this.

in that case can we use

'Charis SIL', 'Georgia' , serif;

as a font stack in https://phabricator.wikimedia.org/T169823

charis won't work without webfont but we should have it in the css anyways. and it should fallback on Georgia

@Volker_E @Krinkle @Pginer-WMF i know you were looking into webfonts a while back. Was any decision reached on how we'd ship the new font? Is this simply a case of packaging it up in the skin. I assume we'd use @font-face not @import or would it be better to add a link tag...?

@Jdlrobson The corresponding task was T155128: Incorporating the webfonts into style guide and it's implementation as it's currently in use at WikimediaUI Style Guide can be found at https://github.com/wikimedia/WikimediaUI-Style-Guide/pull/5

As print functionality is nothing browser vendors have been focussing on in recent years, I'm realistically expecting browser quirks in combination loading webfonts for print. Moreover the solution we've been going for uses rel=preload and asynchronous font loading – that seems unsuitable in combination with print only loaded stylesheet from performance/user experience POV at first sight.

I tested both Charis and Charter and as @matmarex says it has pretty bad support for the Polish language (I also found out that not all Turkish characters are supported). That's pretty strange as Charter looks pretty good for French, Portuguese, German, Greek, Cyrillic, Armenian, Georgian, Hindi, Chinese, Japanese, Hangul, Arabic and Hebrew texts (although I might not catch all issues as I can read only Polish, Russian and a bit of German). Charis supports all characters in mentioned above alphabets (including Polish and Turkish)

@Nirzar - I checked the polish pdf file - Biochemia piwa - it looks amazing (there are some issues with Match/Chem rendering but this is a different case). Also, an excellent choice for a sample pdf file as it has everything (images, tables, math, chem).

@pmiazga the polish pdf uses Charis

Can conclude that that Charis has correct support and Charter doesn't? so we can continue using charis?

@Nirzar - yes, I know that polish pdf is using Charis. I was testing Charis and Charter locally.

Yes, let's use Charis as it supports everything what Charter does plus it supports both Polish and Turkish.

ahh good to hear that

I tested both Charis and Charter and as @matmarex says it has pretty bad support for the Polish language

this confused me.. i thought you are talking about both of them having bad support.

Cool, thank you for confirming!

@Nirzar - while going through the Polish article, noticed that some things appear in sans serif: lists, text in tables, image captions. It seems to make sense for the latter two, but does look a bit odd for lists.

@ovasileva good catch, lists should be serif. I will fix that

matmarex removed a subscriber: matmarex.Jul 22 2017, 7:49 PM
Jdlrobson lowered the priority of this task from High to Normal.Sep 6 2017, 2:48 PM

Untouched in a month so lowering priority.

@Nirzar - this would only be for books? Or for single-PDFs as well? I believe the single PDFs will be getting styled directly from the desktop print styles.

Krinkle removed a subscriber: Krinkle.Sep 19 2017, 8:35 PM

Font display to the rescue? https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

Is it enough to focus on modern browsers? It enjoys support in Firefox, Opera, Safari and Chrome
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display

If so @Volker_E and @Nirzar this would be extremely straight forward to implement in Vector/WikimediaUI if we can convert the font format into WOFF

@font-face {
  font-family: CharterWMF; 
  src: url(resources/charter.woff) format('woff'),
       url(resources/charter.eot) format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}

@mobrovac: Readers Web would like this font to be installed on the boxes that are running the current PDF renderer service (mediawiki-services-electron-render). Is this a manual step or something done via Puppet? Do we need Ops involvement?

@mobrovac: Readers Web would like this font to be installed on the boxes that are running the current PDF renderer service (mediawiki-services-electron-render). Is this a manual step or something done via Puppet? Do we need Ops involvement?

Is this the Charter font present in the texlive-fonts-recommended package? If so, it is already installed on the node where Electron is running. If that's not the same font, we will need to figure out how to add it exactly, but ideally having a Debian package available for it would likely be the cleanest way to go.

@mobrovac Charter does exist in texlive-fonts-recommended

we are facing a lot of kerning and type issues with Electron. is it possible to switch to "charter -- Charter fonts"
font choice will also inform us if there are any upstream bugs for electron, related to kerning.

let me know if I should create another task for switching to charter.

@mobrovac Charter does exist in texlive-fonts-recommended
we are facing a lot of kerning and type issues with Electron. is it possible to switch to "charter -- Charter fonts"
font choice will also inform us if there are any upstream bugs for electron, related to kerning.
let me know if I should create another task for switching to charter.

I see. Yes, please, create a separate task and we can discuss the options for getting the desired font there.

@mobrovac created a subtask to this.. as this is the parent task to move to Charter even in the print css.

https://phabricator.wikimedia.org/T181200

please tag appropriate projects to the card. I just added Electron-PDF

Fito updated the task description. (Show Details)Jun 29 2018, 3:08 AM
alexhollender added a subscriber: alexhollender.

@pmiazga @Jdlrobson is there additional design work to be done here? From what I can tell it's ready for development. Moving out of design column.

From sound of it we just need to add the CSS rule once the font is installed, but T181200 has been declined so I'm not sure what's happening here. Olga please advise.

Volker_E renamed this task from Use WMF styleguide font choice of Serif in print styles to Use Wikimedia Design styleguide font choice of Serif in print styles.Wed, Aug 7, 5:08 PM
Volker_E renamed this task from Use Wikimedia Design styleguide font choice of Serif in print styles to Use Wikimedia Design Style Guide font choice of serif in print styles.
Volker_E updated the task description. (Show Details)
Volker_E removed a subscriber: Volker_E.