This commit is contained in:
parent
246417a553
commit
155d47222e
SSH key fingerprint:
SHA256:5BmINP9VjZWaUk5Z+2CTut1KFhwLtd0ZynMekKbtViM
20 changed files with 5172 additions and 4003 deletions
|
|
@ -1,188 +1,265 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<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();
|
||||
});
|
||||
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="stylesheet" type="text/css" href="../assets/style/styleguide.css">
|
||||
<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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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:
|
||||
<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 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>
|
||||
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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>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>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>
|
||||
|
||||
<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>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>
|
||||
<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>
|
||||
<script
|
||||
src="../assets/script/styleguide.js"
|
||||
type="text/javascript"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue