style monospace more distinctly

[rpfong0]

Someone noted that the monospace text is hard to differentiate on a page. Comparing it to some other styles like the one for k8s, I suspect it's because:

• the font Antora uses is too similar to the variable width font
• the background is too close in contrast

[countableSet]

+1 for this the code blocks and inline blocks don't have enough contrast, at least in dark mode. Is the light mode contrast ok? I'm thinking yes? Maybe Roboto Mono isn't cutting it and we should switch to something else as well.

[countableSet]

ohh maybe I'll try out something like this
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
That san fransisco font seem like the new thing to use https://developer.apple.com/fonts/ 🙃 than just roboto

• -apple-system targets San Francisco in Safari (on Mac OS X and iOS), and it targets Neue Helvetica and Lucida Grande on older versions of Mac OS X. It properly selects between San Francisco Text and San Francisco Display depending on the text’s size.
• system-ui represents the default UI font on a given platform.
• BlinkMacSystemFont is the equivalent for Chrome on Mac OS X.
• Segoe UI targets Windows and Windows Phone.
• Roboto targets Android and newer Chrome OS. It is deliberately listed after Segoe UI so that if you’re an Android developer on Windows and have Roboto installed, Segoe UI will be used instead
• Ubuntuall versions of Ubuntu

k8s is using
font-family: SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace;
github is using
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;

references

• https://www.digitalocean.com/community/tutorials/css-system-font-stack

[rpfong0]

Ty; will give this a try and see how people like it. Using the github approach sounds reasonable b/c it's so widely used. I need to check my notification settings too; I didn't even see any of these comments. ☹️