├── css ├── sans-serif.min.css └── sans-serif.css ├── src └── sans-serif.css ├── .gitignore ├── package.json ├── license ├── README.md └── index.html /css/sans-serif.min.css: -------------------------------------------------------------------------------- 1 | .sans-serif{font-family:-apple-system,avenir next,avenir,roboto,noto,helvetica neue,helvetica,ubuntu,franklin gothic medium,century gothic,sans-serif} 2 | 3 | -------------------------------------------------------------------------------- /css/sans-serif.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SYSTEM FONTS 4 | 5 | */ 6 | .sans-serif { font-family: -apple-system, 'avenir next', avenir, roboto, noto, 'helvetica neue', helvetica, ubuntu, 'franklin gothic medium', 'century gothic', sans-serif; } 7 | /* 8 | Reference: 9 | 10 | https://webkit.org/blog/3709/using-the-system-font-in-web-content/ 11 | https://en.wikipedia.org/wiki/Avenir_(typeface) 12 | https://www.google.com/design/spec/style/typography.html#typography-typeface 13 | 14 | */ 15 | 16 | -------------------------------------------------------------------------------- /src/sans-serif.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | SYSTEM FONTS 4 | 5 | */ 6 | 7 | .sans-serif { 8 | font-family: -apple-system, 9 | 'avenir next', avenir, 10 | roboto, noto, 11 | 'helvetica neue', helvetica, 12 | ubuntu, 13 | 'franklin gothic medium', 'century gothic', 14 | sans-serif; 15 | } 16 | 17 | 18 | /* 19 | Reference: 20 | 21 | https://webkit.org/blog/3709/using-the-system-font-in-web-content/ 22 | https://en.wikipedia.org/wiki/Avenir_(typeface) 23 | https://www.google.com/design/spec/style/typography.html#typography-typeface 24 | 25 | */ 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # List of files for git to ignore 2 | 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | 11 | # Thumbnails 12 | ._* 13 | 14 | # Files that might appear on external disk 15 | .Spotlight-V100 16 | .Trashes 17 | 18 | # Directories potentially created on remote AFP share 19 | .AppleDB 20 | .AppleDesktop 21 | Network Trash Folder 22 | Temporary Items 23 | .apdisk 24 | 25 | # Vim 26 | Session.vim 27 | 28 | # Node 29 | node_modules/* 30 | npm-debug.log 31 | 32 | .DS_Store 33 | .AppleDouble 34 | .LSOverride 35 | 36 | # Icon must end with two \r 37 | Icon 38 | 39 | 40 | # Thumbnails 41 | ._* 42 | 43 | # Files that might appear on external disk 44 | .Spotlight-V100 45 | .Trashes 46 | 47 | # Directories potentially created on remote AFP share 48 | .AppleDB 49 | .AppleDesktop 50 | Network Trash Folder 51 | Temporary Items 52 | .apdisk 53 | 54 | # Vim 55 | Session.vim 56 | 57 | # Node 58 | node_modules/* 59 | npm-debug.log 60 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sans-serif", 3 | "description": "CSS module for utilizing system fonts", 4 | "version": "1.0.0", 5 | "author": { 6 | "name": "mrmrs", 7 | "email": "hi@mrmrs.cc", 8 | "url": "http://mrmrs.cc" 9 | }, 10 | "style": "src/system-fonts.css", 11 | "files": [ 12 | "src", 13 | "css" 14 | ], 15 | "keywords": [ 16 | "css", 17 | "system", 18 | "mac", 19 | "ios", 20 | "ubuntu", 21 | "apple", 22 | "typefaces", 23 | "performance", 24 | "fonts", 25 | "type faces", 26 | "typography", 27 | "design" 28 | ], 29 | "repository": "mrmrs/css-system-fonts", 30 | "license": "MIT", 31 | "devDependencies": { 32 | "tachyons-cli": "^0.3.0" 33 | }, 34 | "scripts": { 35 | "start": "tachyons src/sans-serif.css > css/sans-serif.css && tachyons src/sans-serif.css --minify > css/sans-serif.min.css && tachyons src/sans-serif.css --generate-docs --package=../../package.json > readme.md" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 @mrmrs (mrmrs.io) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sans-serif 1.0.0 2 | 3 | CSS module for utilizing system fonts 4 | 5 | #### Stats 6 | 7 | 296 | 1 | 1 8 | ---|---|--- 9 | bytes | selectors | declarations 10 | 11 | ## Installation 12 | 13 | #### With [npm](https://npmjs.com) 14 | 15 | ``` 16 | npm install --save-dev sans-serif 17 | ``` 18 | 19 | #### With Git 20 | 21 | ``` 22 | git clone https://github.com/tachyons-css/sans-serif 23 | ``` 24 | 25 | ## Usage 26 | 27 | #### Using with [PostCSS](https://github.com/postcss/postcss) 28 | 29 | Import the css module 30 | 31 | ```css 32 | @import "sans-serif"; 33 | ``` 34 | 35 | Then process the CSS using the [`tachyons-cli`](https://github.com/tachyons-css/tachyons-cli) 36 | 37 | ```sh 38 | $ npm i -g tachyons-cli 39 | $ tachyons-cli path/to/css-file.css > dist/t.css 40 | ``` 41 | 42 | #### Using the CSS 43 | 44 | The built CSS is located in the `css` directory. It contains an unminified and minified version. 45 | You can either cut and paste that css or link to it directly in your html. 46 | 47 | ```html 48 | 49 | ``` 50 | 51 | #### Development 52 | 53 | The source CSS files can be found in the `src` directory. 54 | Running `$ npm start` will process the source CSS and place the built CSS in the `css` directory. 55 | 56 | ## The CSS 57 | 58 | ```css 59 | /* 60 | 61 | SYSTEM FONTS 62 | 63 | */ 64 | .sans-serif { font-family: -apple-system, 'avenir next', avenir, roboto, noto, 'helvetica neue', helvetica, ubuntu, 'franklin gothic medium', 'century gothic', sans-serif; } 65 | /* 66 | Reference: 67 | 68 | https://webkit.org/blog/3709/using-the-system-font-in-web-content/ 69 | https://en.wikipedia.org/wiki/Avenir_(typeface) 70 | https://www.google.com/design/spec/style/typography.html#typography-typeface 71 | 72 | */ 73 | ``` 74 | 75 | ## Contributing 76 | 77 | 1. Fork it 78 | 2. Create your feature branch (`git checkout -b my-new-feature`) 79 | 3. Commit your changes (`git commit -am 'Add some feature'`) 80 | 4. Push to the branch (`git push origin my-new-feature`) 81 | 5. Create new Pull Request 82 | 83 | ## Authors 84 | 85 | * [mrmrs](http://mrmrs.io) 86 | * [johno](http://johnotander.com) 87 | 88 | ## License 89 | 90 | MIT 91 | 92 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | System Fonts 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 |
19 |
20 |

Header Examples

21 |

This is a sample h1

22 |

This is a sample h2

23 |

This is a sample h3

24 |

This is a sample h4

25 |
This is a sample h5
26 |
This is a sample h6
27 |
28 |
29 |

Copy Examples

30 |

31 | Quinoa typewriter photo booth, small batch kitsch viral four loko authentic 32 | normcore leggings mustache DIY swag. Thundercats literally master cleanse 33 | pabst. Gochujang retro 8-bit, banh mi affogato bespoke viral next level blog. 34 | Distillery paleo migas, 90's iPhone authentic jean shorts lo-fi swag. Forage 35 | authentic crucifix you probably haven't heard of them man braid, tousled 36 | pitchfork VHS. Neutra scenester 90's waistcoat occupy +1 offal, gentrify marfa 37 | skateboard cold-pressed pug normcore salvia. Authentic keytar cred sriracha, 38 | distillery normcore occupy aesthetic ramps synth stumptown swag pickled beard. 39 |

40 |
41 |
42 |

Code

43 | 
44 | 
45 | .system-sans-serif {
46 |   font-family: -apple-system,
47 |                'avenir next', avenir,
48 |                roboto, noto,
49 |                'helvetica neue', helvetica,
50 |                ubuntu,
51 |                'franklin gothic medium', 'century gothic', arial,
52 |                sans-serif;
53 | }
54 | 
55 |
56 |
57 |
58 | 59 | 60 | --------------------------------------------------------------------------------