diff --git a/styleguide/typography/index.html b/styleguide/typography/index.html index 3e108cd..f80921b 100644 --- a/styleguide/typography/index.html +++ b/styleguide/typography/index.html @@ -50,6 +50,35 @@

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.

+
+
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

@@ -111,6 +140,25 @@
  • Code
    • + +

    Our custom font: Argon Glow

    +

    As mentioned above, we created Argon Glow ourselves. While researching libre typefaces (OFL or similarly + licenced) 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.