# web typography ## using fonts on the web - [complete guide to HTML fonts](https://kinsta.com/blog/html-fonts/) - wonderful breakdown of all the info you need - [font squirrel](https://www.fontsquirrel.com/fonts/list/hot_web "opens in new tab") - free commercial use fonts you can self-host for your site - [css typography settings](https://cssreference.io/typography/ "opens in new tab") - reference for all the css type variables ## type scales Create harmonious scales of type sizing for your different headlines and body text. Learn more about what all this entails at [moderncss.dev](https://moderncss.dev/generating-font-size-css-rules-and-creating-a-fluid-type-scale/). - [type scale](https://type-scale.com/ "opens in new tab") - build your typography system - [typographic scale calculator](https://www.layoutgridcalculator.com/typographic-scale/ "opens in new tab") - build your typographic system - [baseline.is type scale calculator](https://baseline.is/tools/type-scale-generator/) - another solid generator to build your typographic system - [precise type](https://precise-type.com) - yet another generator - [fluid typography with clamp](https://piccalil.li/blog/fluid-typography-with-css-clamp/) is Piccalilli's simplified approach that allows the font size to change based on screen width ## system font stack declaration This is a good chunk of css code to set the font-family of your site to the operating system defaults: ``` body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; } ``` ## webfonts with google fonts You are normally limited by whatever fonts are installed on a user's computer. There's a very limited set of fonts that are probably available on all systems. That's not enough for us awesome designers. Fortunately, [Google hosts over 1900 font families](https://fonts.google.com) in tons of languages and styles for your use. Their [support FAQ](https://developers.google.com/fonts/faq) helps explain how to get the fonts working in your code. ## non-google webfont option [Bunny Fonts](https://fonts.bunny.net) is a non-Google option that is fully GDPR compliant. Similar approach but with a more limited selection. Still, there are nearly 2000 fonts to choose from with no tracking or logging. This is probably a better solution if you can find a web font you like. --- tags: #web #resources #typography home: [[! intro to web resources]]