Implement the font stacks from modernfontstacks.com.

bestony · Dec 12, 2023 · 30250de · 30250de
1 parent 5ec7742
commit 30250de
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/assets/sass/_reset.scss b/assets/sass/_reset.scss
@@ -16,6 +16,7 @@ html {
   scroll-behavior: smooth;
   // Improve text rendering.
   -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 // Use the saner border-box model for all elements.

diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
@@ -60,29 +60,42 @@ $font-weight: (
   lighter:    200,
 );
 
+// Modern font stacks. See how they look at https://modernfontstacks.com/.
+//
 // The following font family declarations use widely available fonts.
 // A user's web browser will look at the comma-separated list and will
 // attempt to use each font in turn until it finds one that is available
 // on the user's computer. The final "generic" font (sans-serif, serif or
 // monospace) hints at what type of font to use if the web browser doesn't
 // find any of the fonts in the list.
 
+// Emojis font stack. Add to end of other stacks when needed.
+$emojis:           'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
 // System-ui font stack.
-$system-ui:       system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Liberation Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+$system-ui:       system-ui, sans-serif;
 
 // Serif font stacks.
-$ui-serif:        ui-serif, Constantia, 'Noto Serif', Georgia, serif;
-$times:           'Times New Roman', 'Liberation Serif', 'Nimbus Roman No9 L', serif;
-$georgia:         Georgia, 'Noto Serif', ui-serif, serif;
-$garamond:        Garamond, Charter, Cambria, 'Noto Serif', ui-serif, serif;
+$ui-serif:        ui-serif, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
+$transitional:    Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
+$old:             'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
+$slab:            Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
+$antique:         Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
+$didone:          Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
 
 // Sans-serif font stacks.
-$ui-sans-serif:   ui-sans-serif, $system-ui;
-$helvetica:       'Helvetica Neue', Helvetica, 'Liberation Sans', 'Nimbus Sans L', Arial, sans-serif;
-$futura:          Futura, 'Century Gothic', Montserrat, Calibri, ui-sans-serif, sans-serif;
+$ui-sans-serif:   ui-sans-serif, system-ui, sans-serif;
+$humanist:        Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
+$geometric:       Futura, Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
+$classical:       Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
+$neo:             Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+$industrial:      Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
+
+// Rounded Sans-serif font stacks.
+$ui-rounded:         ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
 
 // Monospace font stacks.
-$ui-monospace:    ui-monospace, Menlo, 'Cascadia Mono', 'Segoe UI Mono', 'Noto Sans Mono', 'Liberation Mono', Monaco, Consolas, monospace;
+$ui-monospace:    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
 
 // Font family.
 // Use like this: var(--ff-body)