Spurred on by the introduction of a pretty horrible new font in Discord (and the complete inability to change this), I think it's a good idea for us to check our own font usage to make sure we're following best practice for accessibility and design. Funkwhale's not a particularly text-heavy interface, and unlike Discord and Mastodon text isn't our primary deliverable. That being said, we still need to make sure we're thinking about this with any new designs.
Our font face, Lato, is a pretty good choice for overall accessibility. We still need to be mindful of following accessibility guidelines when implementing designs in the frontend. A few basic rules seem to be standard:
- Don't specify a base width for fonts, leave this as
100% to enable users to override it easily
- Use
rem measurements to set relative sizes for elements to enable proper font scaling
- Ensure proper contrast ratio (this is something we're already mindful of in our new designs)
- Use consistent and readable line spacing (this is something we're already mindful of in our new designs)
- Ensure we're following best practice for enabling font override (i.e. use proper CSS controls to modify our font family selections rather than creating new font families for different situations)
- Provide suitable fallback font families
- Avoid using hardcoded dimensions to facilitate interface scaling
Anything else?
I'm not an accessibility expert by any means, so I'm probably missing a few things we need to be aware of when it comes to interface fonts. If anyone out there has some additional knowledge or advice on this matter (particularly if you're someone who uses accessibility tools to interact with Funkwhale) I'd love to get your insights.
