168 lines
No EOL
9.2 KiB
HTML
168 lines
No EOL
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
|
<title>Typography</title>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<a href="/" id="backToWiki">
|
|
<img src="../assets/image/logo_eventname_glow.svg" class="header-image dark-only" alt="Logo of Easterhegg 2025. In the style of a neon sign:
|
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
|
The egg shell and the word 'Eggception' are glowing in a light blue, everything else in a bright pink." />
|
|
<img src="../assets/image/logo_eventname_glow_off.svg" class="header-image light-only" alt="Logo of Easterhegg 2025. In the style of a unpowered neon sign:
|
|
The text 'Unhandled Eggception Easterhegg 2025' with a line art of a hare and an egg.
|
|
The egg shell and the word 'Eggception' are dimly glowing in a dark blue, everything else in a dark pink." />
|
|
</a>
|
|
</header>
|
|
<div>
|
|
<nav>
|
|
<button aria-label="Open Navigation"><i data-icon="menu-small"></i></button>
|
|
<ul>
|
|
<li class="link-back"><a href="/"><i data-icon="arrow-left"></i>Back to Wiki</a></li>
|
|
<li><a href="../"><i data-icon="home"></i>Overview</a></li>
|
|
<li><a href="../colors"><i data-icon="info"></i>Colors</a></li>
|
|
<li class="active"><a href=""><i data-icon="info"></i>Typography</a></li>
|
|
<li><a href="../iconography"><i data-icon="info"></i>Iconography</a></li>
|
|
<li><a href="../logo"><i data-icon="info"></i>Logo</a></li>
|
|
<li><a href="../demopage"><i data-icon="info"></i>Demopage</a></li>
|
|
<li><a href="../generator"><i data-icon="info"></i>Image Generator</a></li>
|
|
<li class="dark-only toggleTheme" data-theme="light"><a href="#" aria-label="switch to light theme"><i
|
|
data-icon="light" class="glow"></i></a></li>
|
|
<li class="light-only toggleTheme" data-theme="dark"><a href="#" aria-label="switch to dark theme"><i
|
|
data-icon="light" class="glow"></i></a></li>
|
|
</ul>
|
|
</nav>
|
|
<main>
|
|
|
|
<div class="alert">
|
|
<i data-icon="warning"></i>
|
|
<p>
|
|
<strong>Work in progress</strong>
|
|
This style guide is still under development.<br>
|
|
Not all resources may be available yet, explanations and examples may be missing and things may
|
|
change without notice.
|
|
</p>
|
|
</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. If you want to see the typography in action, head
|
|
to the <a href="../demopage/">demopage which includes examples of various text components</a>.</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>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Font size</th>
|
|
<th>Font family</th>
|
|
</tr>
|
|
</thead>
|
|
<tr>
|
|
<th scope="row">Main Title</th>
|
|
<td>72px</td>
|
|
<td>Argon Glow</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Heading 1</th>
|
|
<td>48px</td>
|
|
<td>Argon Glow</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Heading 2</th>
|
|
<td>32px</td>
|
|
<td>Argon Glow</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Heading 3</th>
|
|
<td>24px</td>
|
|
<td>Argon Glow</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Heading 4</th>
|
|
<td>18px</td>
|
|
<td>Argon Glow</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Subheading</th>
|
|
<td>24px</td>
|
|
<td>Athiti</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Paragraph</th>
|
|
<td>16px</td>
|
|
<td>Athiti</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Code</th>
|
|
<td>16px</td>
|
|
<td>Departure Mono</td>
|
|
</tr>
|
|
</table>
|
|
<ul>
|
|
<li><span class="main-title">Main Title</span></li>
|
|
<li><span class="h1">Heading 1</span></li>
|
|
<li><span class="h2">Heading 2</span></li>
|
|
<li><span class="h3">Heading 3</span></li>
|
|
<li><span class="h4">Heading 4</span></li>
|
|
<li><span class="subheading">Subheading</span></li>
|
|
<li><span class="p">Paragraph</span></li>
|
|
<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>
|
|
</body>
|
|
|
|
</html> |