Typography

The design contains multiple typefaces, which are intended to be used for different types of text. Below you'll find an explaination about which typeface should be used for which context, as well as a table containing specific font-sizes together with previews. If you want to see the typography in action, head to the demopage which includes examples of various text components.

Paragraphs/Wildcard:

In general, everything that doesn't fall under the following categories, should use the Athiti typeface, unless your use-case calls for something else. This is just a guide and design recommendation after all.

Headings:

We believe that almost no one requires more than four levels of headings. Therefore we only define font-sizes for this many. But you can of course define your own additional levels. But be it slides, webpages or whatever else; headings should always use our custom made neon-sign font, Argon Glow. If you are curious about why we created a custom font, we explained the decision further below.

Subheadings:

This applies to secondary titles directly following a primary title, as is typical on title-slides and similar. Use Athiti, but larger than the text size of the main content. See the table below for a size guide.

Code/monospace:

For monospace content, we think, Departure Mono is a fitting choice, to further add to the 80s retro vibe of the neon look, by leaning into a more digital, pixelated theme. Beware: it won't work nicely with all font sizes, because it tries to heavily rasterize. This makes it a subadequate choice for terminal emulators and editors. Use your monospace typeface of choice if Departure Mono doesn't work for your use-case.

Font Table

If you want to add syntax highlighting to your code, you can use the following formatting (also available as CSS classes using the same name). If you need more granularity, feel free to add more colors and decorations as needed.

• comment: text-shade 4, italic
• neutral: text-shade 2
• identifier: primary
• function: accent 1, italic
• keyword: accent 2
• number: accent 3
• string: accent 3, italic

Our custom font: Argon Glow

As mentioned above, we created Argon Glow ourselves. While researching libre typefaces (OFL or similarly licensed) with a neon-sign look, we found quite a few candidates. But each of them made some sort of design choice we didn't like.

Major issues were gaps and line lengths. Neon signs are made using bent tubes. Some shapes would require either multiple tubes or involve very tight bends and layering in the third dimension. Some typefaces did try to imitate layering, but because typefaces are usually two-dimensional, this didn't really look satisfactory.

When using multiple lines, some typefaces really likes the more is better approach, using unnecessary gaps that one wouldn't do when creating physical signs, simply because it would be a useless amount of additional work.

Bending tubes is difficult, requiring a minimum radius to not damage the pipe or cause flattening. So all typefaces using corners on the inside of bends were a no-go. Some typefaces on the other hand liked bends so much, they added extra bends to the end of lines, which did a full 180. Maybe to try and imitate serifs? Either way, we didn't like that.

So in the end, and over the course of multiple months, we made our own custom typeface that meets all of our desired properties and is freely available under the OFL version 1.1. We hope y'all like it. And who knows, maybe someone will use it for completely unrelated projects than this Easterhegg.

Get the fonts

Argon Glow

Argon Glow is licensed under the OFL 1.1 license.
Link to Website
Source on codeberg.org

Athiti

Athiti is licensed under the OFL 1.1 license.
Link to Website
Source on github.com

Departure Mono

Departure Mono is licensed under the OFL 1.1 license.
Link to Website
Source on github.com