Feeble Nerd: Stuff About Open Source Fonts and CSS/Base64

This is tentative information that I found useful for my preferences and use cases. It is not about advocating general practices (especially for web development), but it might be helpful to some people.

The Thing About Fonts

The thing about fonts is that even people passionate about software licensing consider them mundane. Yet still there is a rabbit hole of details about their design and licensing, as well as their distant and recent histories.

Fonts that have been around for years (sometimes hundreds of years) are still tweaked and updated by large organizations. This effort continues, because the aesthetics of fonts are far from being purely . . . uh . . . just aesthetic. There is science and serious attention towards improving their effects

Of course, there is also plenty of room for improvement through increasing fonts' coverage of the world's full variety of alphabets, as well as symbols of the past, present, and future of many topics.

Post Contents

Monospace and Proportional Fonts
Font Files
Font Families and Variable Fonts
Some Common Fonts
What is Base64?
A Bit More, Concerning Base64
Including Base64 Fonts in CSS

CSS Examples
Working with CSS
Base64 Font Conversion Sites
If the Base64 Crashes Your Text Editors

My TiddlyWiki Example
Python Font Scripts

font file trimming
woff2 conversion
base64 conversion

1. Monospace and Proportional Fonts

Both types of fonts are studied and optimized for readability in their respective spheres.

Monospace fonts are primarily used in situations where it is good to have functional and/or crucial vertical alignment remain consistent across multiple rows of characters

[coding] / [configuration files] / [indentation / tabbed white-space / tables]
[commandline output] / [live log viewing] (for scanning rapidly scrolling text and key words)
[TUIs (Text User Interfaces)]
. . . but most importantly: [ascii art]

Proportional fonts are familiarly used for readability of normal human language. Character width is not uniform between thin and wider characters such that ten semicolons do not have the same width as ten capital 'M's.
Examples:

;;;;;;;;;;;;| 10 proportional semicolons
MMMMMMMMMM| 10 proportional 'M's
Deelicious| 10 proportional letters
;;;;;;;;;;| 10 monospace semicolons
MMMMMMMMMM| 10 monospace 'M's
Deelicious| 10 monospace letters

Ascii Art of Mona Lisa with a Monospace Font: (Obviously, it's the Mono Lisa)

|                                                                               |
|     Art by Normand Veilleux                                                   |
|                                   _______                                     |
|                            _,,ad8888888888bba,_                               |
|                         ,ad88888I888888888888888ba,                           |
|                       ,88888888I88888888888888888888a,                        |
|                     ,d888888888I8888888888888888888888b,                      |
|                    d88888PP"""" ""YY88888888888888888888b,                    |
|                  ,d88"'__,,--------,,,,.;ZZZY8888888888888,                   |
|                 ,8IIl'"                ;;l"ZZZIII8888888888,                  |
|                ,I88l;'                  ;lZZZZZ888III8888888,                 |
|              ,II88Zl;.                  ;llZZZZZ888888I888888,                |
|             ,II888Zl;.                .;;;;;lllZZZ888888I8888b                |
|            ,II8888Z;;                 `;;;;;''llZZ8888888I8888,               |
|            II88888Z;'                        .;lZZZ8888888I888b               |
|            II88888Z; _,aaa,      .,aaaaa,__.l;llZZZ88888888I888               |
|            II88888IZZZZZZZZZ, .ZZZZZZZZZZZZZZ;llZZ88888888I888,              |
|            II88888IZZ<'(@@>Z| |ZZZ<'(@@>ZZZZ;;llZZ888888888I88I              |
|           ,II88888;   `""" ;| |ZZ; `"""     ;;llZ8888888888I888              |
|           II888888l            `;;          .;llZZ8888888888I888,             |
|          ,II888888Z;           ;;;        .;;llZZZ8888888888I888I             |
|          III888888Zl;    ..,   `;;       ,;;lllZZZ88888888888I888             |
|          II88888888Z;;...;(_    _)      ,;;;llZZZZ88888888888I888,            |
|          II88888888Zl;;;;;' `--'Z;.   .,;;;;llZZZZ88888888888I888b            |
|          ]I888888888Z;;;;'   ";llllll;..;;;lllZZZZ88888888888I8888,           |
|          II888888888Zl.;;"Y88bd888P";;,..;lllZZZZZ88888888888I8888I           |
|          II8888888888Zl;.; `"PPP";;;,..;lllZZZZZZZ88888888888I88888           |
|          II888888888888Zl;;. `;;;l;;;;lllZZZZZZZZW88888888888I88888           |
|          `II8888888888888Zl;.    ,;;lllZZZZZZZZWMZ88888888888I88888           |
|           II8888888888888888ZbaalllZZZZZZZZZWWMZZZ8888888888I888888,          |
|           `II88888888888888888b"WWZZZZZWWWMMZZZZZZI888888888I888888b          |
|            `II88888888888888888;ZZMMMMMMZZZZZZZZllI888888888I8888888          |
|             `II8888888888888888 `;lZZZZZZZZZZZlllll888888888I8888888,         |
|              II8888888888888888, `;lllZZZZllllll;;.Y88888888I8888888b,        |
|             ,II8888888888888888b   .;;lllllll;;;.;..88888888I88888888b,       |
|             II888888888888888PZI;. .`;;;.;;;..; ...88888888I8888888888,      |
|             II888888888888PZ;;';;.   ;. .;. .;. .. Y8888888I88888888888b,    |
|            ,II888888888PZ;;'                        `8888888I8888888888888b, |
|            II888888888'                              888888I8888888888888888b |
|           ,II888888888                              ,888888I88888888888888888 |
|          ,d88888888888                              d888888I8888888888ZZZZZZZ |
|       ,ad888888888888I                              8888888I8888ZZZZZZZZZZZZZ |
|     ,d888888888888888'                              888888IZZZZZZZZZZZZZZZZZZ |
|   ,d888888888888P'8P'                               Y888ZZZZZZZZZZZZZZZZZZZZZ |
| ,8888888888888, "                                 ,ZZZZZZZZZZZZZZZZZZZZZZZZ |
| d888888888888888,                                ,ZZZZZZZZZZZZZZZZZZZZZZZZZZZ |
| 888888888888888888a,      _                    ,ZZZZZZZZZZZZZZZZZZZZ888888888 |
| 888888888888888888888ba,_d'                  ,ZZZZZZZZZZZZZZZZZ88888888888888 |
| 8888888888888888888888888888bbbaaa,,,______,ZZZZZZZZZZZZZZZ888888888888888888 |
| 88888888888888888888888888888888888888888ZZZZZZZZZZZZZZZ888888888888888888888 |
| 8888888888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888 |
| 888888888888888888888888888888888888888ZZZZZZZZZZZZZZ888888888888888888888888 |
| 8888888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888888 |
| 88888888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888888888888 |
| 8888888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888 Normand 88 |
| 88888888888888888888888888888888ZZZZZZZZZZZZZZ8888888888888888888 Veilleux 88 |
| 8888888888888888888888888888888ZZZZZZZZZZZZZZ88888888888888888888888888888888 |

No matter which monospace font you use, the same characters will always align vertically over each other.

Same Text With a Proportional Font:

2. Font Files

Font files contain many characters, or "glyphs"

Each file can include letters and numbers from many alphabets, and many other symbols and design elements. Glyphs can have reference numbers of various types in these files. Unicode is one of these standard types that provides a very large set of reference numbers for glyphs.

As of Unicode version 15.0 (2022), there are 149,186 characters with code points, covering 161 modern and historical scripts, as well as multiple symbol sets.

Wikipedia List of Unicode Characters

Note: Most font files only include a portion of 149,186 characters.

Unicode Character Groups

https://www.unicodepedia.com/groups/

There are approximately ~200 character groups, which can make it easier to decide how to trim the potential 149,186 characters down to a smaller size. (see the python section in this post).

File Formats: .otf .ttf .woff2

Today's font files are almost always .otf or .ttf files.

. . . regardless of how they are licensed
these file extensions are also used for variable fonts

Woff2 files are simply a compressed version of .otf or .ttf files. The woff2 compression and extension only apply to fonts.

smaller overall font file size is good for speeding up web loading times

Open/CopyLeft Font Licenses

Font files are licensed like other software. This means they can be either copyright/copyleft, proprietary/open.

Proprietary fonts are licensed by individual companies like Microsoft, who must give permission for their fonts to be used on web servers or in apps.

Open source font licenses include:

MIT
Apache 2.0
Ubuntu Font License
GPL Font Exception (GPL FE)

Note: This exempts non-left documents to include GPL FE fonts

SIL Open Font License 1.0/1.1 ("OFL" or simply "SIL")

Note: This is the generally used open license today

Creative Commons Licenses

CC0 (Public Domain)
CC-BY 3.0 (Unported)
CC-BY-ND 4.0 (International)
CC-BY-NC 4.0 (Non-Commercial International)

3. Font Families and Variable Fonts

Font Families

Although the term font family is used more broadly, it also refers to a specific type of font called a "static" font. "Static" means that each character/glyph is an unchanging arrangement of a pixel map. "Family" is used, because the font family consists of multiple individual font files. Each font file is a separate font variation, such as bold, italic, monospace, condensed, Sans, etc.

When we commonly refer to many fonts, such as "Liberation", we are actually referring to a font family. Liberation has a mono variant, as well as bold, italic, and at different weights.

In a case where a single font variant file contains 50,000 characters/glyphs, a font family will contain multiple times that many characters. Of course, they are generally redundant aside from their stylistic differences.

Because every bit of speed counts when loading a website, it makes sense to care about font family sizes, and potentially, trimming down the number of characters in each font file.

Many Possible Font Family Members:

Most font families consist of around ten or less font variations/font files, but the number of font variations can get much higher.

+------------------+-------+--------+------+-----------+-------------+
| Weight           | Roman | Italic | Sans | Condensed | Italic Sans |
+------------------+-------+--------+------+-----------+-------------+
| 100 – Thin       | 1     | 10     | 19   | 28        | 37          |
| 200 – ExtraLight | 2     | 11     | 20   | 29        | 38          |
| 300 – Light      | 3     | 12     | 21   | 30        | 39+ font |
| 400 – Regular    | 4     | 13     | 22   | 31        |family files |
| 500 – Medium     | 5     | 14     | 23   | 32        | |
| 600 – SemiBold   | 6     | 15     | 24   | 33        |             |
| 700 – Bold       | 7     | 16     | 25   | 34        |             |
| 800 – ExtraBold | 8     | 17     | 26   | 35        |             |
| 900 – Black      | 9     | 18     | 27   | 36        |             |
+------------------+-------+--------+------+-----------+-------------+

Note: The first column lists the 9 standard CSS weights for non-variable fonts. Most font families only utilize a few of these weights.

Variable Fonts are Different

A variable font attempts to accommodate all possible design variations of a font family, but all in a single file. Each single character uses vector line positioning rather than a static image.

Variable fonts have not taken over by any means, despite having been around for some years.

Considerations of using variable fonts versus static:

learning curve in creation / unfamiliar technology
relearning each font with unique font axes and fancy designs
comparative file sizes do not always make a big enough difference
not desiring fonts from the same family (also related to file size)

Variable Font Axes

Multiple variable fonts can also vary in size between each other, because they can facilitate more or less variable parameters. These parameters are called "axes".

Each axis is adjustable in CSS with a single numeric value that determines the visible intensity of its variation. (In the example of a font's weight, this can translate to many more than the former limit of 9 weights.)

Official CSS Variable Font Axes:

weight
width
italic
slant
optical size

custom

CSS references and tutorials describe these axes in detail.

Note: Multiple custom axes can get very intricate. With concerted effort, they can be made to drastically alter a font's style.

My Personal Status on Variable Fonts

With many technologies, their disadvantages relentlessly bother me, so that I pine to move to the next upgrade or latest replacement. However with variable fonts over static fonts: I don't experience that.

Also, I have simple purposes. Perhaps something will brake through to catalyze an effort to undertake them. They are intriguing to me.

Static fonts are not going obsolete, because they will always fit better in certain situations.

4. Some Common Fonts

Microsoft

Arial, Courier New, Verdana, Impact, Lucida, Algerian, Calibri, Tahoma, Georgia, Times New Roman

Apple

San Francisco, Myriad, Chicago, Lucida Grande, Geneva, Espy Sans, System, eWorld Tight, Simple, Skia, Charcoal

Google

https://fonts.google.com/

Noto (Apache 2.0) (VFx2)

For Androi

Droid (Apache 2.0)

For Android
https://en.wikipedia.org/wiki/Droid_(typeface)

Groto (Apache 2.0)

https://github.com/twardoch/groto-fonts-apache2
Perhaps this has been superseded by Roboto Flex

Roboto (Apache 2.0)

For Android
https://github.com/googlefonts/roboto

Roboto Flex (SIL/OTF) (VFx12)

https://github.com/googlefonts/roboto-flex
https://fonts.google.com/specimen/Roboto+Flex
An uncommon 12 Axes

Lato (SIL/OTF) (9 weights x roman+italic)

https://github.com/latofonts/lato-source

Nunito (SIL/OTF) (VFx4)

https://github.com/googlefonts/nunito
https://fonts.google.com/specimen/Nunito+San

Rubik (SIL/OTF) (VFx1)

https://github.com/googlefonts/rubik

Adobe

https://github.com/adobe-fonts

Source Code Pro (SIL/OTF)
Source Sans Pro (SIL/OTF)
Source Serif (SIL/OTF)

Red Hat

https://github.com/RedHatOfficial/RedHatFont

Red Hat Display (SIL/OTF)
Red Hat Text (SIL/OTF)
Overpass Web Font (SIL/OTF)

Other

Aileron (CC0 Public Domain)

TipoType
available on most font sites
has an uncommon 15/16 variations
uncommon CC0 license (abandonware-like public domain)
lacks many characters, and has a couple mix-ups in the variations

Cantarell (VF) (SIL/OTF)

Abattis free software foundry created by Dave Crossland
https://gitlab.gnome.org/GNOME/cantarell-fonts
https://en.wikipedia.org/wiki/Cantarell_(typeface)
Used by Gnome since 2010

Liberation (SIL/OTF)

Ascender Corporation
https://github.com/liberationfonts
https://en.wikipedia.org/wiki/Liberation_fonts

Ubuntu (Ubuntu font license)

Canonical
https://design.ubuntu.com/font
https://github.com/canonical/Ubuntu-fonts
https://en.wikipedia.org/wiki/Ubuntu_(typeface)

Fontesk (a font website) has an OFL license search filter at the time of this writing.

5. What is Base64?

If you want to skip the stuff on base64, you just need to know that base64 converts (encodes) any common byte-based data into simple text. This is only so a computer will decode it back again, into usable byte data.

How Does This Relate to Fonts?

Answer: Embed fonts in CSS rather than requiring access to a server's files.

Many users of web content creation have access to custom CSS, but they do not have access to a server's site files, including font files.

However, web browsers have the ability to read and decode base64 text to real, usable files through CSS syntax without requiring access to a website's server files. By including b64 in CSS, users can use any open source font they want to in their content!

The font becomes more portable and universal across platforms, because it is not tied to system-level font licenses. This can facilitate more carefully calculated and specific website design than relying on whatever font alternative an OS provides.

Basic Characters

Base64 uses . . . da-da-da . . . 64 symbols . . . to transmit any byte-based data.

26 uppercase letters
26 lowercase letters
0 - 9
the plus sign: +
the forward slash: /

26 + 26 + 10 + 1 + 1 = 64

Base64 is not a frequently sought after tool, because it takes about a third more additional space to transmit than the original byte data. However in some situations, people want base64's simple character set.

In the case of CSS, you can be sure that wherever the CSS goes - the base64 can also go. You can know this, because the b64 character set is clearly a subset of the characters allowed in CSS files.

6. A Bit More, Concerning Base64

Base64 can only use so few characters by working through 6-bit binary numbers, but bytes are 8 bits. This means that converting bytes into base64 requires re-dividing the bits.

Every Byte is 8 Bits

Any time you hear about a byte, you are talking about the same thing: 8 bits. A byte is never smaller or larger than 8 bits.

Every bit is a one or zero. Similarly, a digit is always a single zero through nine.

Note: Bits are typically even physically limited by the capabilities of the hardware technology that they are bound to, such that each bit literally cannot be anything but a zero or one.

These 8 bits per byte can be interpreted as binary numbers of one form or another. These numbers are either used to signal the use of something else in a list - or to denote higher quantities and varieties that require grouped bytes to form much larger sequences and numbers.

Despite all they are used for, every byte always remains a simple list of 8 individual ones or zeros in a particular order and combination. It is the firmware and software that decide how to write and/or interpret each bit and byte.

Base64 goes all the way "down" to this level of the bits - and it ignores how everything "on top" of that level interprets them. From that time forward, the bits and bytes are traveling passengers that are like fish out of water in Universes and dimensions that are vastly different from the one they came from: both more shallow and more advanced at the same time.

This is why sometimes it seems like a miracle that you can embed any regular file among something like simple CSS text. It's a total trip.

8 Bits to 6 Bits to Symbols

In a sense, base64 is just some games of expression between numbers and letters.

Firstly, imagine a file's bytes get listed out side-by-side, 3 at a time. Remember that each byte is a list of 8 bits. So every 3 bytes becomes a sequence of 24 bits.

00110010 10100011 00000010 (50 163 2)

becomes:

001100101010001100000010 (3,318,530)

At this point, the 24 bits have lost their meaning, as if you had just strung 3 speed limits together side-by-side: Speed limit = 45. Speed limit = 25. Speed limit = 60. You string them together end-to-end (or concatenate them) and you get 452,560. While this number can technically qualify as a speed limit, it is not intended to share the context of the original speed limits.

The subdivision of 452 and 560 are also meaningless to the original context.

Similarly, the sequences of 24 bits get re-divided into 4 subsections of 6 bits each.

Note: 3x8 = 24 = 4x6

As per the example above, this would be 001100 101010 001100 000010 (12 42 12 2)

What you end up with is an expression of binary numbers limited to 6 binary digits (bits) each. These 6-bit numbers only exist temporarily, for the sake of preserving the larger sequential order of bits from the original data.

Note: Binary numbers limited to 6 binary digits (6 bits) have a total of none other than 64 (2^6) possible values! . . . 0 - 63!

The final step is when each 6-bit sudo-byte gets converted into its base64 symbol. (See the Conversion Table below)

As per the example 12, 42, 12, and 2 would get converted to M, q, M, C.

So in short, the original 3 bytes: 00110010 10100011 00000010 become MqMC.

Note: If 3 bytes becomes 4 base64 characters, then a 76-kilobyte file becomes 101,336

In Summary

A file's bytes are splayed out 3 bytes at a time, into sequences of 24 bits
These sequences of 24 bits then get split into 6-bit sequences
Each of these 6-bit sequences - being interpreted as a binary number - gets denoted by its corresponding base64 symbol. (see the Conversion Table below)

+----------------+---------------+----------------+
| 50           |    163        |     2          |<----------------    50 - 163 - 2
| |           |     |         |     |          |
|. . | . . . . . | . . | . . . . | . . | . . . data stored as 3 bytes
|    V           |     V         |     V          |
| 0 0 1 1 0 0 1 0|1 0 1 0 0 0 1 1|0 0 0 0 0 0 1 0 |----> 50 163 2
|    |         |     |      | |          |
|. . V . . . . . . . . V. . . . . . . .V . . . concatenate to 24 bits
|                                         |
| 0 0 1 1 0 0 1 0 1 0 1 0 0 0 1 1 0 0 0 0 0 0 1 0 |----> ~~3,318,530~~
|                                         |
|. . . | . . . . . | . . . . . | . . . . . | . cut every 6 bits
|      V    |     V |     V     |    V    |
| 0 0 1 1 0 0|1 0 1 0 1 0|0 0 1 1 0 0|0 0 0 0 1 0 |----> 12 42 12 2
|      |     |     |     |     |     |     |      |
|. . . | . . | . . | . . | . . | . . | . . | . encode to base64
|     V     |     V     |     V     |     V      |
|    M     |     q     |     M     |     C      |---------------->     M - q - M - C
+------------+-----------+-----------+------------+

Thus a file consisting of 8-bit bytes takes on the simple expression of a very long string of text, only drawing from the set of 64 characters.

Conclusion

The key is that this process is intended to be reversed: Base64 text is easily decoded back to its former glory as good-old-fashioned files, consisting of good-old-fashioned, 8-bit bytes.

Conversion Table

+---------+--------+--------+               +---------+--------+--------+
| Digital | Binary | Symbol |               | Digital | Binary | Symbol |
+---------+--------+--------+               +---------+--------+--------+
| 00      | 000000 | A      |               | 32      | 100000 | g      |
| 01      | 000001 | B      |               | 33      | 100001 | h      |
| 02      | 000010 | C      |               | 34      | 100010 | i      |
| 03      | 000011 | D      |               | 35      | 100011 | j      |
| 04      | 000100 | E      |               | 36      | 100100 | k      |
| 05      | 000101 | F      |               | 37      | 100101 | l      |
| 06      | 000110 | G      |               | 38      | 100110 | m      |
| 07      | 000111 | H      |               | 39      | 100111 | n      |
| 08      | 001000 | I      |               | 40      | 101000 | o      |
| 09      | 001001 | J      |               | 41      | 101001 | p      |
| 10      | 001010 | K      |               | 42      | 101010 | q      |
| 11      | 001011 | L      |               | 43      | 101011 | r      |
| 12      | 001100 | M      |               | 44      | 101100 | s      |
| 13      | 001101 | N      |               | 45      | 101101 | t      |
| 14      | 001110 | O      |               | 46      | 101110 | u      |
| 15      | 001111 | P      |               | 47      | 101111 | v      |
| 16      | 010000 | Q      |               | 48      | 110000 | w      |
| 17      | 010001 | R      |               | 49      | 110001 | x      |
| 18      | 010010 | S      |               | 50      | 110010 | y      |
| 19      | 010011 | T      |               | 51      | 110011 | z      |
| 20      | 010100 | U      |               | 52      | 110100 | 0      |
| 21      | 010101 | V      |               | 53      | 110101 | 1      |
| 22      | 010110 | W      |               | 54      | 110110 | 2      |
| 23      | 010111 | X      |               | 55      | 110111 | 3      |
| 24      | 011000 | Y      |               | 56      | 111000 | 4      |
| 25      | 011001 | Z      |               | 57      | 111001 | 5      |
| 26      | 011010 | a      |               | 58      | 111010 | 6      |
| 27      | 011011 | b      |               | 59      | 111011 | 7      |
| 28      | 011100 | c      |               | 60      | 111100 | 8      |
| 29      | 011101 | d      |               | 61      | 111101 | 9      |
| 30      | 011110 | e      |               | 62      | 111110 | +      |
| 31      | 011111 | f      |               | 63      | 111111 | /      |
+---------+--------+--------+               +---------+--------+--------+

Note: See how 0 (zero) is one of the 64 conversions (0 --> A). This means that the actual number 64 is not! 64 does not play a direct role in base64: only everyone else, right up through 63 . . . tragic.

7. Including Base64 Fonts in CSS

CSS Examples

Working with CSS

To implement a font in base64, you need to understand how to work with HTML and CSS. Luckily this is one of the easiest skills to find tutorials for online.

It is worth noting that HTML is very rarely used without CSS, meaning that you likely do not have to know how to implement it from scratch.

Minimally speaking, implementing new CSS in an existing site typically involves finding the right place in a site - or finding the right file - and then ensuring the new CSS is not redundant or misplaced.

Base64 Font Conversion Sites

If the Base64 Crashes Your Text Editor

If/when you are saving your base64 lines to a text file, then I think you want to have the file be encoded as us-ascii or the somewhat? equivalent iso-8859-1, instead of the more common utf-8.

Utf-8 encoded files seem to cause text editors to freeze and crash with these extremely long lines of text. This relates to the way these file encodings are parsed differently.

Jun 13, 2023

Stuff About Open Source Fonts and CSS/Base64