Visual communication is the most important aspect of any design including web, and typography plays a critical role in that communication. However, the web presents the additional challenge of communicating across platforms. This makes font size, weight, color, leading (line-height), kerning (letter spacing), and balance all the more important components to consider when crafting a website. However, no differently than print, the difference between good typography and bad typography is work that looks professional versus work that looks amateur.
Table of Contents
- Line length
- Leading (line height)
- Vertical Rhythm
- Text Emphasis
- Typographic Scales
- In-Class Exercise
Similar to print, the otimal line length is 45-75 characters per line. This increases overally readability and legibility of your text. However, because a line length of 65 characters may look different on an iPhone than on 27-inch monitor, your line-length should be fluid and adapt with your typographic scale and screen width.
Credit: Smashing Magazine
Pro Tip
- A handy technique is to create a dummy paragraph element with lorem ipsum text, and drop in a
<span style="color: red;">*</span>at the 45th and 75th characters. See below:
<p>Lorem ipsum dolor sit amet, consectetur adip<span style="color: red;">*</span>isicing elit, sed do eiusmod <span style="color: red;">*</span>tempor incididunt ut labore et dolore magna aliqua.</p>References:
Leading, or line-height in CSS, is simply the vertical space between rows of text in a paragraph. A proper line height helps increase legibility and establish a visual rhythm to the page.
Below are some basic, helpful principles to follow:
- The larger the text, the less leading is needed
- The longer the length, the more leading is needed
- The shorter the length, the less leading is needed
Credit: Smashing Magazine
Credit: Design Instruct
Can you spot which is correct? Number 2 is the closest to have the optimal reading experience, but leading could be increased a bit more.
The simplest rule to follow is to set your line-height value to 1.5 and adjust +-0.3 based on your the specific typeface and your font-size. line-height is generally applied to the body element in CSS since that is where you typically establish your base font settings for your designs.
body {
...
line-height: 1.5;
}You'll notice that for line-height you can use a unitless value, ie. it doesn't need to be px, %, or em/rem. This means the number is just a simple multiplier (ie. one and a half times)
Line height and width are always going to be relative to the typeface you are using, so use what you have learned and do your best to select the proper measurements.
References:
Just as important and your vertical grid for layout, a baseline grid is essential for your type layout. This allows your readers to easily follow the flow of text by creating a continuous rhythm. This is very important to keep text on a consistent grid and I feel this is often the most difficult to achieve.
Credit: Smashing Magazine
Credit: Code Tuts
To be consistent with vertical rhythm, vertical spacing (margins) between elements and your line-height should be the same. ie. Set your body's line-height, paragraph's, and heading's bottom margin to be the same final value.
// 16px = 1rem = 100% = default font size
body {
line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-bottom: 1.5rem;
}Question: How can we improve this with Sass?
Need help? Try these tools:
Giving emphasis to a word or phrase without interrupting the reader is also important to think about. Italicized and bolded text, different colors, weights, sizes, and typefaces are all different ways to emphasize text. However, much like in print, you should exercise restraint and use as few as possible to effectively communicate your message.
Remember, when setting italics, use em for emphasis (not i tags) and strong for bold text (not b tags).
You may have heard about the golden ratio and how using it in your designs can help create more harmonious proportions. This is due to using a mathematical scale or multiplier which establishes a rhythm. In web design, a modular scale helps establish a consistent rhythm to govern the size of our type and other elements.
Creating scales is fairly simple; you pick a base size (ie. 16px or 1em) and a scale multiplier (ie. 1.618). Multiply the result once to get your first size, then multiply that result by your multiplier to get your second size, and so on.
/**
* 1em = 16px = base font size
*
* 1.618 = golden ratio scale
*
* Modular Scale
* 1em * 1.618 = 1.618em // h4
* 1.618em * 1.618 = 2.618em // h3
* 2.618em * 1.618 = 4.236em // h2
* 4.236em * 1.618 = 6.854em // h1
*/Setting up these calculations can be repititious and tedious, so this is where working with Sass can help, through it's variables, functions, and mixins. Let's take a look at the in-class exercise files.
- Switch back to the
masterbranch in your local<username>/assignmentsproject in GitHub Desktop - Update from
kcc-nma-art258/assignments:masterbranch to get the latest changes - Create a new branch called
week-6-exerciseand style your typography page
References: