Font choices #580
Description
Most of our Figma UI design guidelines went through an extensive period of design and feedback. One particular aspect that didn't is fonts.
This is a tracking issue. Let's use it to link to informative discussions about fonts, typefaces, and typography; and to specific fonts that we might want to use for various purposes.
Constraints
For Hackworth Codes, we have the following constraints:
- Use open source fonts that we can redistribute. Proprietary fonts typically use CDNs that are usually used to track user, and often have unpredictable and cumbersome per-use fees (or really expensive flat fees).
- Host fonts ourselves. This will produce larger bundles, but I don't think that'll be a concern. Note that this constraint and the first constraint do not overlap: there are open source font CDNs that track users (e.g., Google Fonts), and there may be proprietary fonts that can be self-hosted (presumably at great cost).
- Render nicely on macOS, iOS, Android, and Windows. Allegedly some popular open source fonts don't render nicely on Windows.
- Have good language coverage.
The 4th constraint can be (and may have to be) relaxed for languages with substantially different character sets, but I wouldn't want to choose 2 different fonts for, say, English and Swedish.
Links to informative discussions
- Inter UI, a typeface designed for user interfaces
- The Inter typeface family. This is mainly just a more recent discussion about the same font as above.
- System Font Stack, a case for not using web fonts at all. Presumably Tailwind uses this as their defaults, but we should confirm that. edit: Confirmed, Tailwind as of v3.2.0 does appear to do this. For example, for
sans, it usesui-sans-serif, system-ui, ...followed by some more specific per-platform defaults (e.g.,-apple-system,Segoe UI,Roboto), presumably in case the browser doesn't recognize thesystem-uisetting. - Never, ever use system-ui as the value of font-family. I leave this here because it's referenced in one of the above discussions, but no longer seems valid. See, e.g., v5: Update system font stack twbs/bootstrap#30561, and https://caniuse.com/font-family-system-ui.
Use cases
I'd also like to choose different fonts for different purposes. The purposes are enumerated below, along with links to fonts that we think might be good for that use case.
UI (buttons, headers, etc)
Inter
Designed for screens and interfaces. Looks like a good choice for our UI. However, there are some complaints in the above threads that it doesn't have good kerning (possibly fixed, though?), and that it doesn't render nicely on Windows, which we should check. (Note: I have checked on Windows 11 and it looks fine.)
There are also complaints that it's too wide for mobile, which is being addressed in the not-yet-released Inter Display font. There's a discussion here about the upcoming v4.0, which will include Inter Display:
Seems popular enough that it might be a bit too same-y.
Pretendard
That's... an odd name. Is it problematic?
In any case, it's a fork of Inter and might be useful for "CJK" on Windows.
Public Sans
Designed by the US federal government!
(Oops, Latin-only. I think this disqualifies it.)
Branding
We chose to use Adobe Source Serif for our branding, so we should be consistent and use the same in Hackworth Codes. (However, see note below about our code typeface.)
Code
Note that per our UI design guidelines, we decided to go with a serif font for code, rather than the typical monospace choice.
For now we're using Adobe Source Serif. My only concern with it is that it's the same font we use for our branding. On the other hand, this was on purpose! Let's see whether it causes confusion. I would like to limit the amount of branding that's displayed in the application.
Documentation
Maybe we'll go with the same font as we use for UI, but it might make more sense to choose something that's readable for large, long blocks of text, vs. a UI font which should presumably be optimized for display-like uses.