Better web font for I (capital i) and l (small L)

[seisman]

Description of the problem

See this page as an example: https://pygmt-6lvxfpcmx.vercel.app/gallery/line/vector-heads-tails.html

The two "I" in the two red boxes are different. The first one is capital i, and the second one is small L. However, they look the same in the current font (I'm using Microsoft Edge on macOS. Not sure what they look like on other web browsers and platforms).

Should we switch to a better web font? Does the current theme "sphinx_rtd_theme" support custom web fonts?

[maxrjones]

I agree with you. I think it would just involve changing a couple lines in doc/build/_static/style.css. For example, this is the output for the vector example with this css style (which is currently set to open sans):

body {
    font-family: "Tahoma", sans-serif;
}

h1, h2, h3, h4 {
    font-weight: 300;
    font-family: "Tahoma",sans-serif;
}

I like Tahoma because it is sans-serif but still has differences between those two characters.

[seisman]

Looks good. Does Linux support it?

[maxrjones]

Good point, probably not. We can include multiple fonts in the font-family property as a fall-back and/or find an open source alternative to Tahoma that still makes those characters more distinct.

[seisman]

It would be better if you can open a PR so that we can preview what the new font settings look like.

[weiji14]

Ok, here's 3 open PRs with new web fonts to preview:

• Update web font #934 (Tahoma) - Microsoft Windows only? - https://pygmt-git-docs-fonts.gmt.vercel.app/api/generated/pygmt.Figure.basemap.html
• Update web font (serve the font) #936 (IBM Plex Sans) - Open Font License - https://pygmt-git-docs-fonts-serve.gmt.vercel.app/api/generated/pygmt.Figure.basemap.html
• Update web font to Atkinson Hyperlegible #938 (Atkinson Hyperlegible) - Somewhat modified Open Font License - https://pygmt-git-docs-fonts-legible.gmt.vercel.app/api/generated/pygmt.Figure.basemap.html

Any other candidates 😆?

[maxrjones]

The Atkinson Hyperlegible font looks great IMO

[liamtoney]

The Atkinson Hyperlegible font looks great IMO

Agreed! I'd be happy w/ this and don't mind the zero with the slash. One concern I have is that it's on the smaller side, I'd suggest we bump up the font size a bit if we use this (easy).

[weiji14]

The Atkinson Hyperlegible font looks great IMO

Agreed! I'd be happy w/ this and don't mind the zero with the slash. One concern I have is that it's on the smaller side, I'd suggest we bump up the font size a bit if we use this (easy).

Increasing the font size sounds good, I'll look into the style.css file.

Also, should we/do we need a list of fallback font types if we serve the font directly? I.e. do something like font-family: "Atkinson Hyperlegible", "Tahoma", sans-serif;?

[liamtoney]

I think that it's best practice to include a fallback font regardless. I'd suggest just falling back to generic sans-serif from Atkinson though.

[weiji14]

Ok, done at f14a8e1. See https://pygmt-git-docs-fonts-legible-gmt.vercel.app/gallery/line/vector-heads-tails.html#sphx-glr-gallery-line-vector-heads-tails-py, compare with https://www.pygmt.org/dev/gallery/line/vector-heads-tails.html.

New (Atkinson Legible)	Old (Open Sans)

Font size looks better now. But maybe should tweak the font-weight down a little bit? Or is it ok?

[liamtoney]

Thanks, @weiji14. I think having a slightly heavier font is fine and might even be better for small screens. Plus, then we don't have to serve the "light" font or whatever.

I think this looks great, adds a bit more style to our site, and hopefully makes it more readable too. But I think we should check with other @GenericMappingTools/python folks too!

[seisman]

Looks good to me.