EH22/design
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Explain typeface and font-size choices and usage
All checks were successful
/ build (push) Successful in 11s
Details

Browse source
This commit is contained in:
lilith 2025-03-01 02:15:12 +01:00
commit cb41f3cebc
Signed by: lilith
SSH key fingerprint: SHA256:7kmBUkMCVUCN9z9MyGuBan8hifDCBaiG1RonGxdCB3A
1 changed files with 48 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

48
styleguide/typography/index.html
View file

@ -50,6 +50,35 @@
</div>
<h1>Typography</h1>
<p>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.</p>
<dl>
<dt>Paragraphs/Wildcard:</dt>
<dd>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.</dd>
<dt>Headings:</dt>
<dd>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.</dd>
<dt>Subheadings:</dt>
<dd>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.</dd>
<dt>Code/monospace:</dt>
<dd>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.</dd>
</dl>
<h2>Font Table</h2>
<div class="layout-column">
<table class="row-hover">
<thead>
@ -111,6 +140,25 @@
<li><span class="code">Code</span></li>
</ul>
</div>
<h2>Our custom font: Argon Glow</h2>
<p>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.</p>
<p>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.</p>
<p>When using multiple lines, some typefaces really likes the <i>more is better</i> approach, using
unnecessary gaps that one wouldn't do when creating physical signs, simply because it would be a useless
amount of additional work.</p>
<p>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.</p>
<p>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.</p>
</main>
</div>
<script src="../assets/script/styleguide.js" type="text/javascript"></script>