338 lines
12 KiB
HTML
338 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<script>
|
|
const setTheme = (theme) => {
|
|
theme ??= localStorage.theme || "system";
|
|
document.getElementById("themeLight").checked = theme === "light";
|
|
document.getElementById("themeDark").checked = theme === "dark";
|
|
localStorage.theme = theme;
|
|
};
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
setTheme();
|
|
});
|
|
</script>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<link rel="shortcut icon" href="../assets/image/favicon.png" />
|
|
<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="../glow"><i data-icon="info"></i>Glow</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 id="themeToggleDark" class="themeToggle">
|
|
<input
|
|
id="themeDark"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeDark">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</li>
|
|
<li id="themeToggleLight" class="themeToggle">
|
|
<input
|
|
id="themeLight"
|
|
type="checkbox"
|
|
aria-label="Switch between dark and light mode"
|
|
/>
|
|
<label for="themeLight">
|
|
<i data-icon="light"></i>
|
|
</label>
|
|
</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>
|
|
<table class="row-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Type</th>
|
|
<th>Font size</th>
|
|
<th>Font family</th>
|
|
<th>Preview</th>
|
|
</tr>
|
|
</thead>
|
|
<tr>
|
|
<th scope="row">Main Title</th>
|
|
<td>72px</td>
|
|
<td>Argon Glow</td>
|
|
<td><span class="main-title">Main Title</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Heading 1</th>
|
|
<td>48px</td>
|
|
<td>Argon Glow</td>
|
|
<td><span class="h1">Heading 1</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Heading 2</th>
|
|
<td>32px</td>
|
|
<td>Argon Glow</td>
|
|
<td><span class="h2">Heading 2</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Heading 3</th>
|
|
<td>24px</td>
|
|
<td>Argon Glow</td>
|
|
<td><span class="h3">Heading 3</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Heading 4</th>
|
|
<td>18px</td>
|
|
<td>Argon Glow</td>
|
|
<td><span class="h4">Heading 4</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Subheading</th>
|
|
<td>24px</td>
|
|
<td>Athiti</td>
|
|
<td><span class="subheading">Subheading</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Paragraph</th>
|
|
<td>16px</td>
|
|
<td>Athiti</td>
|
|
<td><span class="p">Paragraph</span></td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">Code</th>
|
|
<td>16px</td>
|
|
<td>Departure Mono</td>
|
|
<td><span class="code">Code</span></td>
|
|
</tr>
|
|
</table>
|
|
<p>
|
|
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.
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<code><span class="comment">comment</span></code
|
|
>: text-shade 4, italic
|
|
</li>
|
|
<li>
|
|
<code><span class="neutral">neutral</span></code
|
|
>: text-shade 2
|
|
</li>
|
|
<li>
|
|
<code><span class="identifier">identifier</span></code
|
|
>: primary
|
|
</li>
|
|
<li>
|
|
<code><span class="function">function</span></code
|
|
>: accent 1, italic
|
|
</li>
|
|
<li>
|
|
<code><span class="keyword">keyword</span></code
|
|
>: accent 2
|
|
</li>
|
|
<li>
|
|
<code><span class="number">number</span></code
|
|
>: accent 3
|
|
</li>
|
|
<li>
|
|
<code><span class="string">string</span></code
|
|
>: accent 3, italic
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>Our custom font: Argon Glow</h2>
|
|
<p>
|
|
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.
|
|
</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>
|
|
|
|
<h2>Get the fonts</h2>
|
|
<dl>
|
|
<dt>Argon Glow</dt>
|
|
<dd>
|
|
Argon Glow is licensed under the
|
|
<a href="https://raw.codeberg.page/argon/glow/LICENSE"
|
|
>OFL 1.1 license</a
|
|
>.<br />
|
|
<a href="https://argon.codeberg.page/font/glow/">Link to Website</a
|
|
><br />
|
|
<a href="https://codeberg.org/argon/glow">Source on codeberg.org</a>
|
|
</dd>
|
|
<dt>Athiti</dt>
|
|
<dd>
|
|
Athiti is licensed under the
|
|
<a
|
|
href="https://raw.githubusercontent.com/cadsondemak/athiti/refs/heads/master/OFL"
|
|
>OFL 1.1 license</a
|
|
>.<br />
|
|
<a href="https://cadsondemak.github.io/athiti/">Link to Website</a
|
|
><br />
|
|
<a href="https://github.com/cadsondemak/athiti"
|
|
>Source on github.com</a
|
|
>
|
|
</dd>
|
|
<dt>Departure Mono</dt>
|
|
<dd>
|
|
Departure Mono is licensed under the
|
|
<a
|
|
href="https://raw.githubusercontent.com/rektdeckard/departure-mono/refs/heads/main/public/assets/LICENSE"
|
|
>OFL 1.1 license</a
|
|
>.<br />
|
|
<a href="https://departuremono.com/">Link to Website</a><br />
|
|
<a href="https://github.com/rektdeckard/departure-mono"
|
|
>Source on github.com</a
|
|
>
|
|
</dd>
|
|
</dl>
|
|
</main>
|
|
</div>
|
|
<script
|
|
src="../assets/script/styleguide.js"
|
|
type="text/javascript"
|
|
></script>
|
|
</body>
|
|
</html>
|