When creating a minimalist or simple website design, typography plays a key role in adding contrast and interest that would normally be done with images. Because of that, it’s essential that the typography looks professional and is well-tuned with the rest of the design. Here are a few CSS tips to make sure you get it right.
Use a Proper Typographic Scale
A typographic scale ensures that all of the type follows a predictable size pattern, improving readability for the user. An easy way to do this in CSS is to set all of the font on the page to a size of 18px, and then adjust headers and paragraphs with the em measurement with equal space in between. Here is an example of that:
body { font-size: 18px; }
h1 { font-size: 2.0em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }
h6 { font-size: 1.0em; }
Make Sure the Leading is Not Too Small or Too Large
Leading refers to the space between lines of font. It’s what gives the oompf to double spacing when you type papers for class. When the leading is too small, text looks bunched together, and when it is too large, it’s unstylish and hard to read. A good rule of thumb is to set the leading about 2 to 5 points larger than the size of the font.
Emphasize in a Non-Distracting Way
When you emphasize text, you want to do so in a way that helps and does not distract the reader. Sometimes, things like bolding, small-caps, and italics all at the same time make the font too hard to read. Generally, it’s best to stick to a simple italicized script for clean and readable design.
Creating Typographic Contrast
Use elements like size, typeface, color, casing, and weight to add interest to your design. The Web Designer Wall provides a wonderful encyclopedia of effects designers can use.
