Typography Notes

Foreword: This file is both notes on typography and a basic testing ground for fonts and the creation of my 'library' of styles.

This is a note. I'm quite pleased with how this looks in the general stream of the page.

Typography, it seems, is a deeply complex topic. I'm fascinated by what I've read so far. However, I do need to make a choice. There are a handful of characteristics that belong to every existing font that are particularly relevant to me. I've listed them below:

1. Variable v Fixed
2. Historical Classification
3. Pairing Potential
4. Legibility v Style

Of these, historical classification is the most important to me. This, more than anything, sets the emotion of the thing to me. Then, of course, the font needs to be variable enough . I do somewhat distrust truly variable fonts as the designer will only have assessed so many different states for beauty. But a fixed font will need sufficient weights and styles. Lastly, I'd prefer a font that mostly legible with just a little style / flair.

• iA Writer Quattro - Interesting choice, based off of IBM Mono but with a little flex to make it more readble.
• OpenSans - A nearly universal choice. Shows up everywhere and looks great. But, does not seem to belong to a family like IBM Plex.
• IBMPlex - A whole family of fonts. Has a decent look. When scaled the same, I honestly can not tell a difference between it and OpenSans except it has hard tails on the "I" character.
• Vollkorn is an interesting variable font. It's got thicker characters without having more 'weight' so to speak. It's more analog than digital. It has a minmum weight of 400, which has already become somewhat frustrating.
• Aresenal - Very different sort of font. It does not please me for long copy but may be useful for headers or something in the future.

Example of a maxim line.

The choice is a tie between IBMPlex and Vollkorn, for now. And it's really a choice between analog and digital. IBMPlex will mesh better with monospace fonts (indeed, there is an IBM Plex monospace variant) and the side of me that works with computers. I'm going to keep both as mainline fonts for my cognatio projects, and perhaps choose one or the other on the basis of page vibe.

Typographic Sizing, Cadence, and Measure

Much of this is adapted from this page of this guide . Getting the cadence and spacing right is tricky, but it seems I can encode all I need into the heading, paragraph, etc. tags.

Vertical spacing, including margins and lines, should be in multiples of base line height . Of course, text height is based around the 'em' unit, but line height is often a multiple. Best practice seems to be 1.5, which is what I use here. However, that means that computing the margins for tags with different base font size is tricky. Margins and lines need to be multiples of base line height .

• Use font sizes that increment by double or half. (not sure about this one)
• Use a base font-size of 16px (seems to be the default on most browsers).
• Skip weights by 200.

On Mobile Typgraphy

The following are my notes on this guide and perhaps others as time goes on.

For mobile, it might be a good idea to stick with system fonts in the start. They'll automatically match the design of the mobile system itself ( Roboto for Android and San Francisco for Apple).

let code_test = 4;