mirror of
https://github.com/dtinth/comic-mono-font.git
synced 2026-02-21 22:43:59 +00:00
271 lines
8.9 KiB
HTML
271 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta
|
||
name="description"
|
||
content="A legible monospace font for playful professionals. Comic Sans for
|
||
hackers"
|
||
/>
|
||
<link rel="stylesheet" href="style.css" />
|
||
<script src="./index.js" defer></script>
|
||
<title>Serious Sans</title>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="main" class="seriousOriginal">
|
||
<h1>Serious Sans</h1>
|
||
<p>
|
||
A legible monospace font for playful professionals. Comic Sans for
|
||
hackers
|
||
</p>
|
||
<p>
|
||
This font is a fork of <a href="https://github.com/dtinth">dtinth</a>’s
|
||
<a href="https://github.com/dtinth/comic-mono-font">Comic Mono</a>,
|
||
which in turn is a fork of
|
||
<a href="https://github.com/shannpersand">Shannon Miwa</a>’s
|
||
<a href="https://github.com/shannpersand/comic-shanns">Comic Shanns</a>
|
||
(version 1)
|
||
</p>
|
||
<h2>Example Text</h2>
|
||
<div id="exampleText" class="serious seriousOriginal">
|
||
<p>The five tall boxing wizards jump quickly.</p>
|
||
<p>THE FIVE TALL BOXING WIZARDS JUMP QUICKLY!</p>
|
||
<p>0123456789.:,;(*!?')</p>
|
||
</div>
|
||
<br />
|
||
<div id="previewButtons">
|
||
<div class="flex column">
|
||
<button id="seriousOriginalButton">Serious Sans</button>
|
||
<button id="seriousBoldButton">Serious Sans Bold</button>
|
||
<button id="seriousLightButton">Serious Sans Light</button>
|
||
</div>
|
||
<div class="flex column">
|
||
<button id="seriousItalicButton">Serious Sans Italic</button>
|
||
<button id="seriousBoldItalicButton">Serious Sans Bold Italic</button>
|
||
<button id="seriousLightItalicButton">
|
||
Serious Sans Light Italic
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<br />
|
||
<div>
|
||
Apply to
|
||
<label for="entirePageRadio">entire page:</label>
|
||
<input
|
||
type="radio"
|
||
name="applyTo"
|
||
id="entirePageRadio"
|
||
value="entirePage"
|
||
/>
|
||
<label for="exampleTextOnlyRadio">example text only:</label>
|
||
<input
|
||
type="radio"
|
||
name="applyTo"
|
||
id="exampleTextOnlyRadio"
|
||
value="exampleTextOnly"
|
||
checked
|
||
/>
|
||
</div>
|
||
<br />
|
||
<div>
|
||
<label for="newExampleText">Example Text:</label>
|
||
<input type="text" id="newExampleText" name="newExampleText" />
|
||
<input type="button" id="newExampleTextButton" value="Update" />
|
||
</div>
|
||
<br />
|
||
<h2>Downloads</h2>
|
||
<div id="downloads">
|
||
<div>
|
||
<h3>TrueType Format</h3>
|
||
<ul>
|
||
<li>
|
||
<a href="./SeriousSans/ttf/SeriousSans.ttf">SeriousSans.ttf</a>
|
||
</li>
|
||
<li>
|
||
<a href="./SeriousSans/ttf/SeriousSansItalic.ttf"
|
||
>SeriousSansItalic.ttf</a
|
||
>
|
||
</li>
|
||
<br />
|
||
<li>
|
||
<a href="./SeriousSans/ttf/SeriousSansBold.ttf"
|
||
>SeriousSansBold.ttf</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="./SeriousSans/ttf/SeriousSansBoldItalic.ttf"
|
||
>SeriousSansBoldItalic.ttf</a
|
||
>
|
||
</li>
|
||
<br />
|
||
<li>
|
||
<a href="./SeriousSans/ttf/SeriousSansLight.ttf"
|
||
>SeriousSansLight.ttf</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="./SeriousSans/ttf/SeriousSansLightItalic.ttf"
|
||
>SeriousSansLightItalic.ttf</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div>
|
||
<h3>OpenType Format</h3>
|
||
<ul>
|
||
<li>
|
||
<a href="./SeriousSans/otf/SeriousSans.otf">SeriousSans.otf</a>
|
||
</li>
|
||
<li>
|
||
<a href="./SeriousSans/otf/SeriousSansItalic.otf"
|
||
>SeriousSansItalic.otf</a
|
||
>
|
||
</li>
|
||
<br />
|
||
<li>
|
||
<a href="./SeriousSans/otf/SeriousSansBold.otf"
|
||
>SeriousSansBold.otf</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="./SeriousSans/otf/SeriousSansBoldItalic.otf"
|
||
>SeriousSansBoldItalic.otf</a
|
||
>
|
||
</li>
|
||
<br />
|
||
<li>
|
||
<a href="./SeriousSans/otf/SeriousSansLight.otf"
|
||
>SeriousSansLight.otf</a
|
||
>
|
||
</li>
|
||
<li>
|
||
<a href="./SeriousSans/otf/SeriousSansLightItalic.otf"
|
||
>SeriousSansLightItalic.otf</a
|
||
>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<h2>What?</h2>
|
||
<p>
|
||
Serious Sans is a legible monospaced font made to resemble the classic
|
||
Comic Sans font we all know and love. It is designed to be suitable for
|
||
use in a professional coding environment while retaining the playfulness
|
||
of the original
|
||
</p>
|
||
<p>
|
||
Here's what it looks like viewing one of
|
||
<a href="https://kaBeech.github.io/Advent-Of-Code-2022"
|
||
>my Advent Of Code functions</a
|
||
>
|
||
in VS Code:
|
||
</p>
|
||
<p>
|
||
<img
|
||
src="./vscExample.png"
|
||
alt="Serious Sans in VS Code"
|
||
title="Serious Sans in VS Code"
|
||
style="max-width: 100%"
|
||
/>
|
||
</p>
|
||
<h2>Why?</h2>
|
||
<p>
|
||
To help overcome writer's block, some writers change the font of their
|
||
word processor to Comic Sans. Perhaps the jaunty style helps put our
|
||
brains in a playful mood so we can just write without getting hung up in
|
||
self-criticism
|
||
</p>
|
||
<p>
|
||
Serious Sans aims to provide that same experience for programmers and
|
||
their IDE's. As coders, we also enjoy playful styling and tools that
|
||
help us just get to work. But most of us like to have certain standards
|
||
that make our work easier. Monospacing and legibility are important
|
||
factors that facilitate quick scanning of many lines of code
|
||
</p>
|
||
<h3>Legibility</h3>
|
||
<p>
|
||
Legibility means being able to quickly tell which character is which. In
|
||
fonts with low legibility, for example, it can be difficult to tell the
|
||
difference between an upper case 'I' and a numeral '1'
|
||
</p>
|
||
<h3>Monospacing</h3>
|
||
<p>
|
||
Monospacing means ensuring every character has the same width. This is
|
||
helpful to quickly line up rows of text. For an example of why this is
|
||
helpful, consider adding up a fancy dinner bill:
|
||
</p>
|
||
<p>
|
||
<img
|
||
src="./fancyDinner.png"
|
||
alt="Adding up a fancy dinner bill"
|
||
title="Adding up a fancy dinner bill"
|
||
style="max-width: 100%"
|
||
/>
|
||
</p>
|
||
<p>
|
||
Without a monospaced font, getting all those numbers to line up for easy
|
||
adding would be a pain!
|
||
</p>
|
||
<h3>Origins</h3>
|
||
<p>
|
||
I originally changed the font in my IDE to Comic Mono as a joke. I
|
||
decided to leave it that way for a while for fun, and found that it
|
||
actually seems to help my mindset while working. I made Serious Sans as
|
||
my own leetle fork to improve the usability of the font ^_^
|
||
</p>
|
||
<h2>Differences from Comic Mono:</h2>
|
||
<br />
|
||
<ol>
|
||
<li>• I edited the 'a' to make it look less like an 'o'</li>
|
||
<br />
|
||
<li>
|
||
• I remade the Bold weight style and added a Light weight style as
|
||
well
|
||
</li>
|
||
<br />
|
||
<li>• I added Italic styles for each weight style</li>
|
||
<br />
|
||
<li>• I added OpenType format versions</li>
|
||
</ol>
|
||
<br />
|
||
<h2>Any issues?</h2>
|
||
<p>If you notice any, please feel free to open an issue!</p>
|
||
<p>
|
||
The Light weight version could use a little refining still (the x-height
|
||
seems to be off for some glyphs). I improved it for the Light Italic
|
||
style (where it was especially noticable) but I have not yet improved it
|
||
for Light Original
|
||
</p>
|
||
<p>
|
||
Please note that so far I have only been using the original
|
||
SeriousSans.tff. The other styles have been reviewed but are largely
|
||
untested
|
||
</p>
|
||
<h2>GitHub</h2>
|
||
<p>
|
||
<a href="https://github.com/kaBeech/serious-sans"
|
||
>Serious Sans is hosted on GitHub!</a
|
||
>
|
||
</p>
|
||
<h2>License</h2>
|
||
<p>
|
||
Serious Sans is licensed under the
|
||
<a href="./LICENSE">MIT License</a>
|
||
</p>
|
||
<h2>Disclaimer</h2>
|
||
<p>
|
||
Please note that this font is in no way affiliated with the delightful
|
||
<a
|
||
href="https://www.myfonts.com/collections/serious-sans-pro-font-ogentroost"
|
||
rel="nofollow"
|
||
>Serious Sans Pro</a
|
||
>
|
||
font. I just like classic PC games ^_^
|
||
</p>
|
||
</div>
|
||
</body>
|
||
</html>
|