11–20 of 21 posts
what is the monospace font used for the code shown there?
Changing `font-family: "Simple Console"` to `font-family: "Simple Console", monospace` would fix it.
what is the monospace font used for the code shown there?
It's cool but the "r" in that font is distracting.
Annoyingly, the canvas is hard-coded to use only the "Simple Console" font; if your browser doesn't load the font for whatever reason, it shows up in a proportional typeface which ruins the effect. Changing `font-family: "Simple Console"` to `font-family: "Simple Console", monospace` would fix it.
Note: some CSS attributes for the pre (or canvas) can be set trough an exported “settings” object:
export const settings = { fontFamily : 'Monaco' }what is the monospace font used for the code shown there?
It is a custom version of “Simple” by Norm made to include some of the box drawing glyphs. https://lineto.com/typefaces/simple
Another commercial website that heavily uses ASCII animation: https://oxide.computer/
By inspecting the animated diagrams they switch from text rendering in a PRE element to a CANVAS renderer when the page width shrinks below a certain size.