├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── index.html ├── package.json └── system-font.css /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | # Exclude generated files 4 | _system-font.scss 5 | system-font.less 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 2.0.0 (2017-06-28) 2 | 3 | - Changed from `system` to `system-ui` to match the CSS specification. 4 | 5 | ## 1.1.0 (2015-08-02) 6 | 7 | - Added: Android fonts Roboto and Droid Sans after Ubuntu. 8 | - Removed: Windows 3.1-ME font Microsoft Sans Serif. 9 | - Updated: documentation. 10 | 11 | ## 1.0.0 (2015-07-30) 12 | 13 | - Added: Initial version 14 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # CC0 1.0 Universal License 2 | 3 | Public Domain Dedication 4 | 5 | The person(s) who associated a work with this deed has dedicated the work to the public domain by waiving all of his or her rights to the work worldwide under copyright law, including all related and neighboring rights, to the extent allowed by law. 6 | 7 | You can copy, modify, distribute and perform the work, even for commercial purposes, all without asking permission. 8 | 9 | In no way are the patent or trademark rights of any person affected by CC0, nor are the rights that other persons may have in the work or in how the work is used, such as publicity or privacy rights. 10 | 11 | Unless expressly stated otherwise, the person(s) who associated a work with this deed makes no warranties about the work, and disclaims liability for all uses of the work, to the fullest extent permitted by applicable law. 12 | 13 | When using or citing the work, you should not imply endorsement by the author or the affirmer. 14 | 15 | This is a [human-readable summary of the Legal Code](https://creativecommons.org/publicdomain/zero/1.0/) ([read the full text](https://creativecommons.org/publicdomain/zero/1.0/legalcode)). 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # System Font CSS 2 | 3 | System Font CSS is set of `@font-face` rules that let you use the native system font of the OS running the browser. 4 | 5 | ```css 6 | body { 7 | font-family: system-ui; 8 | } 9 | ``` 10 | 11 | [system-font.css](system-font.css) offers eight variations of the `system-ui` font family; **light** (300) **light italic**, **normal** (400), **normal italic**, **medium** (500), **medium italic**, **bold** (700), and **bold italic**. 12 | 13 | ```css 14 | blockquote { 15 | font: italic 300 system-ui; 16 | } 17 | 18 | p { 19 | font: 400 system-ui; 20 | } 21 | ``` 22 | 23 | ## Quick Start 24 | 25 | ### Install 26 | 27 | This package can be installed with: 28 | 29 | * [npm](https://www.npmjs.com/package/system-font-css): `npm install --save system-font-css` 30 | 31 | ### Load 32 | 33 | When installed with npm, system-font.css will create both a SCSS and LESS partial for easy importing: 34 | 35 | ```scss 36 | @import 'system-font'; 37 | ``` 38 | 39 | ## OSX 40 | 41 | **OSX** has used three system typefaces. Since **El Capitan** it has used **San Fransisco**. In **Yosemite** it used **Helvetica Neue**. From **Mavericks** back to **Kodiak** it used **Lucida Grande**. 42 | 43 | ## Windows 44 | 45 | **Windows** has used four system typefaces. Since **Vista** it has used **Segoe UI**. In XP, it used **Tahoma**, which oddly enough does not have an italic variation. From **Windows ME** back to **Windows 3.1** it used **Microsoft Sans Serif**. Finally, from **Windows 2.0** back to **Windows 1.0** it used **Fixedsys**. Neither **Microsoft Sans Serif** or **Fixedsys** are included in this set, with apologies. 46 | 47 | Also, for those of opposed to joy, remember that **Internet Explorer 8** does not support local `@font-face` rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the `font` declaration. 48 | 49 | ```css 50 | body { 51 | font-family: system-ui, "Segoe UI", Tahoma; 52 | } 53 | ``` 54 | 55 | ## Android 56 | 57 | **Android** has used two system typefaces. Since **Ice Cream Sandwich** it has used **Roboto**. From **Jelly Bean** back to **Cupcake** it used **Droid Sans**, which also lacks an italic variation. Do you suppose OS developers dislike *emphasis*? 58 | 59 | ## Ubuntu 60 | 61 | Ubuntu has always used one system typeface, aptly named **Ubuntu**. That part was easy. 62 | 63 | ## Native `system-ui` resources 64 | 65 | * [CSS Fonts Module Level 4 Editor’s Draft Specification](https://drafts.csswg.org/css-fonts-4/#system-ui-def) 66 | * [Chrome Platform Status](https://www.chromestatus.com/feature/5640395337760768) 67 | * [Can I Use entry](https://caniuse.com/#feat=font-family-system-ui) 68 | * Previous [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family. 69 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | System Font CSS 3 | 4 | 5 | 6 | 7 | 112 | 113 |

114 | System Font CSS 115 |

116 | 117 |

118 | System Font CSS is set of @font-face rules that let you use the native system font of the OS running the browser. 119 |

120 | 121 | 
122 | body {
123 |     font-family: system;
124 | }
125 |
126 | 127 |

128 | system-font.css offers eight variations of the system font family; light (300) light italic, normal (400), normal italic, medium (500), medium italic, bold (700), and bold italic. 129 |

130 | 131 | 
132 | blockquote {
133 |     font: italic 300 system;
134 | }
135 | 
136 | p {
137 |     font: 400 system;
138 | }
139 |
140 | 141 |

142 | OSX 143 |

144 | 145 |

146 | OSX has used three system typefaces. Since El Capitan it has used San Fransisco. In Yosemite it used Helvetica Neue. From Mavericks back to Kodiak it used Lucida Grande. 147 |

148 | 149 |

150 | Windows 151 |

152 | 153 |

154 | Windows has used four system typefaces. Since Vista it has used Segoe UI. In XP, it used Tahoma, which oddly enough lacks an italic variation. From Windows ME back to Windows 3.1 it used Microsoft Sans Serif. Finally, from Windows 2.0 back to Windows 1.0 it used Fixedsys. Neither Microsoft Sans Serif or Fixedsys are included in this set, with apologies. 155 |

156 | 157 |

158 | Also, for those of opposed to joy, remember that Internet Explorer 8 does not support local @font-face rules. Therefore, should you need to reference system fonts in that browser then you will need to do so from the font declaration. 159 |

160 | 161 | 
162 | body {
163 | 	font-family: system, "Segoe UI", Tahoma;
164 | }
165 |
166 | 167 |

168 | Android 169 |

170 | 171 |

172 | Android has used two system typefaces. Since Ice Cream Sandwich it has used Roboto. From Jelly Bean back to Cupcake it used Droid Sans, which also lacks an italic variation. Do you suppose OS developers dislike emphasis? 173 |

174 | 175 |

176 | Ubuntu 177 |

178 | 179 |

180 | Ubuntu has always used one system typeface, apty named Ubuntu. That part was easy. 181 |

182 | 183 |

184 | Is system going to be a thing? 185 |

186 | 187 |

188 | Maybe. There are discussions in the W3C to standardize a generic system family. 189 |

190 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "system-font-css", 3 | "description": "Use the native system font of the OS running the browser", 4 | "version": "2.0.2", 5 | "author": "Jonathan Neal (http://jonathantneal.com)", 6 | "contributors": [ 7 | "Zach Leatherman (https://zachleat.com/)" 8 | ], 9 | "homepage": "https://github.com/jonathantneal/system-font-css", 10 | "license": "CC0-1.0", 11 | "keywords": ["system", "fonts", "faces", "rules", "css", "mac", "windows", "ubuntu", "san", "fransisco", "helvetica", "neue", "lucida", "grande", "segoe", "ui", "microsoft", "sans", "serif"], 12 | "bugs": { 13 | "url": "https://github.com/jonathantneal/system-font-css/issues" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git@github.com:jonathantneal/system-font-css.git" 18 | }, 19 | "engines": { 20 | "node": ">=0.8.0" 21 | }, 22 | "dependencies": { 23 | "cpr": "^2.2.0" 24 | }, 25 | "devDependencies": {}, 26 | "main": "system-font.css", 27 | "scripts": { 28 | "install": "cpr system-font.css _system-font.scss -o && cpr system-font.css system-font.less -o" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /system-font.css: -------------------------------------------------------------------------------- 1 | /*! system-font.css v2.0.2 | CC0-1.0 License | github.com/jonathantneal/system-font-css */ 2 | 3 | @font-face { 4 | font-family: system-ui; 5 | font-style: normal; 6 | font-weight: 300; 7 | src: local(".SFNS-Light"), local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); 8 | } 9 | 10 | @font-face { 11 | font-family: system-ui; 12 | font-style: italic; 13 | font-weight: 300; 14 | src: local(".SFNS-LightItalic"), local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma"); 15 | } 16 | 17 | @font-face { 18 | font-family: system-ui; 19 | font-style: normal; 20 | font-weight: 400; 21 | src: local(".SFNS-Regular"), local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma"); 22 | } 23 | 24 | @font-face { 25 | font-family: system-ui; 26 | font-style: italic; 27 | font-weight: 400; 28 | src: local(".SFNS-Italic"), local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma"); 29 | } 30 | 31 | @font-face { 32 | font-family: system-ui; 33 | font-style: normal; 34 | font-weight: 500; 35 | src: local(".SFNS-Medium"), local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold"); 36 | } 37 | 38 | @font-face { 39 | font-family: system-ui; 40 | font-style: italic; 41 | font-weight: 500; 42 | src: local(".SFNS-MediumItalic"), local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); 43 | } 44 | 45 | @font-face { 46 | font-family: system-ui; 47 | font-style: normal; 48 | font-weight: 700; 49 | src: local(".SFNS-Bold"), local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold"); 50 | } 51 | 52 | @font-face { 53 | font-family: system-ui; 54 | font-style: italic; 55 | font-weight: 700; 56 | src: local(".SFNS-BoldItalic"), local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold"); 57 | } 58 | --------------------------------------------------------------------------------