These are just raw notes on Typography. They aren’t necessarily organized in any specific way, this is more of a board to place things I learn about the topic. I used to have these unorganized within the notes app on my phone, but by placing them here I hope that someone else can use them too. If you have any questions on the notes or a question on a particular snippet feel free to reach out to me using the form at the bottom of this page.
Newest Font Downloads:
- Inter UI – Run of the mill default clean typeface – now available on Google Fonts as well
- Akzidenz Grotzec Condensed – A solid bold headline font when used in all caps
- Grotzec Condensed – A solid bold headline font when used in all caps
- Suisse – A Swiss typeface similar to Helvetica Neue (Use Semibold the most maybe?)
- Museo Sans – A thick, bold font (probably use 900)
- IBM Plex Mono – A mix between man and code
- Camden Market – A script font like Lush
- Helvetic Now – Only got the bold version of this font, but still a really nice block headline font FOR DISPLAY not web
- Pacifico – A modern cursive bubbly font
- SF Pro & SF Compact – System fonts for iOS and Apple Watch
- New York – Apple-designed serif
- Ilisarniq – clean, modern, basic font.
- Manrope – clean and modern
- Grilli Type (Goes by GT-) – simple basic baseline font
- Neue Haas – Helvetica-like body font that’s good for articles at semi-large sizes
Solid Pairings:
- Jubilat & Open Sans
- Domaine Display & Proxima Nova
- Avenir & Freight Text
- Brandon Grotesque & Freight Text
Web Rules relating to typography
- 16 px should be the smallest font size
- Ems are relative to that default font size
- Optimal line length is between 45 and 75 characters (60 – 70ch)
- line-height: 1.5; Is the best way. It means it’s 1.5 x the font size. Also 1.5 is a ideal line height. Headings can be set to 1.1
The following is a great way to use the CSS clamp() function to set dynamic text:
.element {
font-size: clamp(16px, (1rem + 5vw), 50px);
}Solid Typographic Scale – 12, 14, 16, 20, 34
Leading between heading and paragraph should be either 40 or 32
Between 50-65 characters per line is perfect
Every letter of the alphabet must be distinct enough from each other to avoid confusion
Ideal line length is between 10 and 12 words
Rounded and pointed letters appear shorter when set at the same size as the other letters, thats why they are slightly bigger in a font
An ampersand is an E and a T combined
Fonts with big round Os and tails are more human like and friendly because they resemble the human face
Fonts that are more rectilinear conjure up thoughts of technology and coldness
When writing a love letter use Humana Serif Light
Fonts used most regularly:
- Frutiger
- Helvetica
- Futura
- Gill Sans
- Univers
- Garamond
- Bembo
- Minon
- Arial
Highly Visible Fonts:
- Helvetica
- Meta
- Gill Sans
- Rotis
- Arial
- ITC Officiana Sans
Worst Fonts:
- Souvenir
- Gill Sans Light Shadowed
- Brush Script
- Papyrus
- Neuland Inline
- Ransom Note
- 2012 Olympic Font
Typeface Classifications
Albertus
- Pointy “serifs”
- In-between a serif and sans serif
Avenir
- Versatile, modern
- Headline & body copy, small sizes on screen
Baskerville
- Traditional, professional, government
- Body copy for books, newspapers, web
Bembo
- Classic beauty, formal tradition
- Book typography
Bickham Script
- Formal, elegant, 18th century
- Headings and subheads, logos, menus, invitations, packaging
Bodoni
- Larger sizes
- Modern serif, magazine cover
Caslon
- Universal, headings, body copy
- All typesetting
Cooper Black
- Best seen at a distance
- Retro
Didot
- Modern, extreme contrast
- Neoclassical
Franklin Gothic
- Strong, stylistic, versatile
- For display
Frutiger
- Clean, proportional, legible, distinctive, modern
- Signs from a distance or from an angle
Futura
- Efficient, forward, geometric
- Advertising copy, modern design
Garamond
- Legibility, readability, high legibility
- Printed materials, books, reports
Gill Sans
- Traditional, classical, refined
- Display, text font at larger sizes modern, and traditional
Helvetica
- Virtually anything, excellent kerning
- Body copy and headlines
Minion
- Printed copy, books, journals, university
Mrs. Eaves
- Contemporary, baskerville-like
- Roman, loose spacing
Optima
- Classic appearance
- Elegant, conservative, understandable
Rockwell
- Geometric
- Display typeface
Sabon
- Highly legible, variety of sizes
- Book copy, traditional, formal
Univers
- Diversity, modern, body copy, display
- Similar to Helvetica
@joekotlan on X