Typography

Think of this as a quick-start for modern typography and custom CSS setup. If you pick a CSS framework, a lot of these decisions are already made for you. They might be the right ones for your project and they might not.

Sometimes a framework adds a lot of value to a project. Sometimes, it becomes a bloated config nightmare. Remember, all code is garbage so anything you do will be wrong in some sort of way.

With that out of the way, let's get started.

Kick off a new project

Sure, you could clone this repo, but why not just start from scratch and make your own decisions?

Here is how this project was started.

yarn init
yarn global add parcel-bundler && yarn add parcel-bundler --dev
yarn add sanitize.css parcel-bundler materialize-css --dev
mkdir -p src/scss
touch src/scssindex.scss
touch src/scssvars.scss
touch src/index.html

CSS Reset or Normalize

CSS Reset - does what is says - resets all the default styles to a baseline. CSS Normalize - patches browsers that vary from spec to make them consistent. CSS Reboot -

If you use a library, this has been chosen for you. You can make the decision on your own though. I've been really happy with santize.css b/c they already provide the system font stack OOTB.

@import "sanitize.css/sanitize.css";
@import "sanitize.css/typography.css";

System Font Stack

Recent (and even not-so-recent) versions of OS's now ship with high quality fonts.

boost performance and load time
they look good!
no need to host fonts, especially in a locked down environment like govt.

Overview from MD

This is what the code looks like: sanitize.css/typography

Quick Comment/Tangent on Colors

Color is important to everything in a website. If a designer chose a palette, get the palette from them. If something looks off, chat with a designer about it before hacking in something like lighten($brand-color, 15%). Things like this are often a sign something might have changed in the app or a piece of info is missing and can negatively affect the overall usability of an app or website. These little hacks seem reasonable, they can mess things up.

Accessbility - Make sure there is enough contrast.

Do not hardcode random colors everywhere

This is about maintainability, tweaking, and fine tuning.

Put color variables in a config file. Use these variables everywhere.
Consider a color mixin - This one is really good and since it is a mixin, it can be imported easily into a pre-processor like SASS.

MaterializeCSS color mixin

color: color('pink', 'darken-1');

Simplify font sizes

Hopefully, your designer didn't make every little font a different size. This used to be a bigger problem when everything was dont in photoshop, but design language systems/tools have improved this.

Guidelines

Like all guidelines, you might have to deviate from them at some point. They are guidelines for a reason so just double check that it is really appropriate to do so..

Use the system font stack.
ALWAYS use rem for font size. especially for reponsive!
monospace for things like code snippets where significant whitespace is important
Ideal line length for body is 40-60 chars. see line-length
Do not hand code colors. Colors should be configured as vars or use a mixin.

panthershark/typography