Last active
June 6, 2024 17:37
-
-
Save cscottyb/f61dfc9446f1f4c5628382ed00e2abfa to your computer and use it in GitHub Desktop.
Font Stacks for UI and system fallbacks.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* For MLA and APA */ | |
| .serif-paper { | |
| font-family: Times New Roman, Times, "Tinos"; | |
| } | |
| .serif-old-style { | |
| font-family: Athelas, Georgia, serif; | |
| font-family: Georgia, serif; | |
| } | |
| .serif-old-style-lined { | |
| font-family: Iowan Old Style, Charter, Palatino, "Palatino Linotype", "Gentium Pluse", Times New Roman, Times, "Tinos", serif; | |
| font-family: Charter, Palatino, "Palatino Linotype", "Gentium Pluse", Times New Roman, Times, "Tinos", serif; | |
| } | |
| .serif-baroque { | |
| font-family: Cambria, Times New Roman, Times, "Caladea", "Tinos", serif; | |
| } | |
| .serif-dodine { | |
| font-family: "Bodoni 72", "Bodoni 11", serif; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| Font Stacks: Sans-Serif | |
| Compatible with CSS4 | |
| Classifications: Neo-Grotesk, Grotesk, 2 Geometric, and Humanist | |
| */ | |
| .sans-serif-body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Calibri", Roboto, "Carlito", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| /* catagories */ | |
| .sans-serif-neo-grotesk { | |
| font-family: -apple-system, BlinkMacSystemFont, Roboto, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| .sans-serif-grotesk { | |
| font-family: Helvetica, "Franklin Gothic", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| .sans-serif-geometric-display { | |
| font-family: "Futura", "Century Gothic", "Jost", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| .sans-serif-geometric { | |
| font-family: "Avenir", "Century Gothic", "Jost", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| .sans-serif-humanist { | |
| font-family: "Gill Sans", "Segoe UI", "DejaVu Sans", "Noto Sans", "Trebuchet MS", "Verdana", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| /* condense */ | |
| .sans-serif-condense { | |
| font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| .sans-serif-geometric-condense { | |
| font-family: "Avenir Next Condense", "Arial Narrow", "Roboto Condensed", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| .sans-serif-impact { | |
| font-family: "Impact MS", "Arial Narrow", "Roboto Condensed", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| UI Font Stacks | |
| Compatible with CSS4 to CSS2 - allegedly | |
| System fonts to create stacks for serif, sans-serif, and monospace. | |
| */ | |
| .sans-serif-ui { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Noto Sans", Tohama, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| .monospace-ui { | |
| font-family: ui-monospace, Menlo, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Cousine", Courier New, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| .serif-ui { | |
| font-family: Iowan Old Style, "Sitka Text", "Cambria", "Gentium Plus", Times New Roman, Times, "Tinos", Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; | |
| } | |
| /* "system-ui" does not work properly on Windows for non-Latin languages. */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment