Font Selection

[Mischback]

This issue tracks the initial implementation of fonts.

Pareto 80%

• [x] re-evaluate fonts
  • [x] What Font Should I Use?
  • [x] How to choose the right face for a beautiful body
  • [x] main text-body font, sans serif:
  • Origin: https://www.fontsquirrel.com/fonts/dejavu-sans
  • Selection: https://github.com/github/mona-sans
    • SIL OFL v1.1
    • variable font
    • current favorite
  • https://www.fontsquirrel.com/fonts/be-vietnam
    • SIL OFL v1.1
    • great readability (as evaluated wth Be Vietnam Pro on Googlefonts)
    • https://github.com/bettergui/BeVietnamPro
  • https://www.fontsquirrel.com/fonts/fira-sans
    • SIL OFL v1.1
    • really huge set of glyphs
    • really many variations
    • probably even better: https://github.com/bBoxType/FiraGO
  • https://www.fontsquirrel.com/fonts/source-sans-pro
  • https://www.fontsquirrel.com/fonts/arimo
  • https://www.fontsquirrel.com/fonts/pt-sans
  • https://www.fontsquirrel.com/fonts/rubik
    • SIL OFL v1.1
    • slightly rounded edges, might be too playful for the desired impression
  • https://www.fontsquirrel.com/fonts/dosis
  • https://www.fontsquirrel.com/fonts/lato
  • https://www.fontsquirrel.com/fonts/tanohe-sans
  • https://www.fontsquirrel.com/fonts/encode-sans
  • https://www.fontsquirrel.com/fonts/khula
  • https://www.fontsquirrel.com/fonts/spartan-mb
  • https://www.fontsquirrel.com/fonts/luiss
  • [x] source code font, monospace: tbd
  • https://www.fontsquirrel.com/fonts/fira-code
  • Selection: https://www.fontsquirrel.com/fonts/hack
  • https://www.fontsquirrel.com/fonts/recursive-sans
    • This is a true variable font! It may be used to provide normal text, bold text, italic text and monospaced text, all from a single font file!
    • https://www.recursive.design/
    • Doesn't work as body text font!
  • [x] quote font, serif: tbd
  • Selection: https://www.fontsquirrel.com/fonts/crimson
  • https://www.fontsquirrel.com/fonts/playfair-display
  • https://www.fontsquirrel.com/fonts/inria-serif
    • does not look classy enough
  • https://www.theleagueofmoveabletype.com/goudy-bookletter-1911
  • https://www.fontsquirrel.com/fonts/libre-caslon
• [x] check implementation of the provided webfonts
  • [x] https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts
  • [x] https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#font_families
  • [x] https://blog.logrocket.com/how-to-use-web-fonts-css/
  • [x] https://css-tricks.com/snippets/css/using-font-face-in-css/
  • [x] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
  • [x] https://web.dev/variable-fonts/
  • [x] https://variablefonts.io/implementing-variable-fonts/
  • [x] Check caniuse: Basically all modern browsers already support the feature!
  • [x] https://blog.logrocket.com/variable-fonts-is-the-performance-trade-off-worth-it/ Might not be worth the effort!

Related / Follow up

• 55 for improvements of the webfont implementation

• 34 for further technical optimization

[Mischback]

Resources

• https://fonts.google.com/knowledge/choosing_type/a_checklist_for_choosing_type
• https://fonts.google.com/knowledge/choosing_type/emotive_considerations_for_choosing_typefaces
• https://fonts.google.com/knowledge/choosing_type/pairing_typefaces

[Mischback]

Splittet into two dedicated issues, 80% (this issue) completed, see #55 for the remaining 20%.