Core Interaction Lab: Week 7

CSS Typography and Web Fonts

Type Styles

Let's go over some of the traditional properties that CSS provides us to change some basic typographical styles.

font-family sets the typeface you want the text to appear in. You can provide multiple typefaces and also specify general styles of typefaces to use if your webpage's viewer doesn't have your preferred font available. This is known as a "font stack".

font-size controls the size of your font. We will go deeper into its options in the section below on units.

font-weight controls the weight of your font. You can give it named values, such as bold and normal, or supply it with a numerical value if you are using a font with many weights.

font-style controls the whether your font should be italic, oblique, or normal. If your font doesn't have italic or orbique glyphs available, the browser will create them artificially.

letter-spacing controls the distance between glyphs in your text. You might have heard it referred to as "tracking" in a print context. Note that letter-spacing is not kerning – letter-spacing controls the distance between every glyph uniformly, whereas kerning refers to the spacing between specific glyph pairs.

font-kerning controls the kerning of your text. It can be one of three values: auto, the default, will let the browser choose when and when not to kern. For the most part, this means kerning is on, but the MDN documentation notes that some browsers will automatically disable kerning for small font sizes. The other two values are normal, which will apply the kerning values in the font, and none, which will disable kerning. Kerning is a relatively new concept to CSS, so note that some browsers (like Internet Explorer) do not support it. Generally, you do not need to change this setting, but you should know that it exists!

line-height controls the distance between lines of your text. It is also known as "leading" (lead as in the metal, not the verb). line-height doesn't have a unit - it is a multiplier of the font's current size. This means that as your base font-size increases, the apparent line-height increases automatically.

text-align controls the alignment of your text.

text-indent controls the indentation of the first line of your text.

font-variant

We can control advanced typography functionality with CSS's font-variant properties. They control properties such as ligatures and caps that might not be supported in all fonts. In some cases, if the variant glyphs are not included with your font, the browser will synthesize them on the spot. In other cases, no difference will appear if the feature isn't supported. The font I've used for this site doesn't support some of the advanced features described below, so in some of the examples I have used the font Source Serif Pro, an open-source font from Adobe.

font-variant-caps allows you to use alternate glyphs that your font might provide for capital letters. Potential values include small-caps, petite-caps, or unicase. This sentence has the value of small-caps-all.

font-variant-numeric gives you greater control over how numbers are displayed. For example, it allows you to use special glyphs for ordinal numbers, for example 1st, 2nd, 3rd instead of the default 1st, 2nd, 3rd. You can also use font-variant-numeric: diagonal-fractions; to display typographic fractions: 1/2, 1/4, 1/100 as opposed to the default 1/2, 1/4, 1/100. See the documentation to see all the possible numeric modifications that exist.

font-variant-ligatures allows you to control usage of ligatures provided by your font. Compare the paragraphs below:

efficacy, afterwards, affluent, effervescent

efficacy, afterwards, affluent, effervescent

The first paragraph shows the default behavior of normal, which is to use common ligatures where available. Notice ligatures for ft, ff, ffl, and ffi, which are all supported by Source Serif Pro. In the second paragraph, ligatures are disabled with the none value, and you can see how each character is displayed individually.

Depending on the font you're using, you might have extended options such as historical or discretionary ligatures (often found for ct, et, and Th). font-variant-ligatures gives you complete control over where and when these should be used. See the MDN documentation for more information. Note that, as of this writing, ligatures aren't supported in either Microsoft's Internet Explorer or Edge browsers.

font-variant-east-asian can be used to change the set of glyphs used when rendering Chinese and Japanese characters. For example, two of its allowed values, traditional and simplified, can be used to switch between Chinese traditional and simplified characters.

<p>买</p>
<p class="traditional">买</p>

.traditional {
    font-variant-east-asian: traditional;
}

Results in the following (if you do not see a difference, or see nothing, it may be that your computer doesn't have the right fonts installed.)

买

买

Typographic Pseudoselectors

Pseudoselectors allow us to select parts of the DOM that might not otherwise be accessible through a class, ID, or tag name based CSS selector. :hover is an example of a pseudoselector that we already know. There are additional pseudoselectors that lend themselves well to designing typography.

::first-line selects the first line of a block-level element. For example:

p::first-line {
    font-variant-caps: small-caps;
}

Resize the browser and notice how the style only gets applied to words that appear on the first line.

::first-letter works similarly, but only on the first letter of a sentence. For example, I can create a dropcap using the following CSS:

p::first-letter {
    float: left;
    font-size: 63px;
    font-style: italic;
    line-height: 53px;
    padding-right: 4px;
}

Units

So far, we've been working mostly with pixels, or px, when sizing text. CSS provides us with a variety of different units that give us many options for how we want to define our text size.

px, or pixels, is what we're used to. The base unit of measurement refers to one pixel on the user's screen. Pixels allow us to have very exact control over size but can be difficult to work with in a responsive design (we will learn more about building responsive designs in a few weeks!).

em is a unit of measurement that refers to the width of the letter M (you might be familiar with em — and en – dashes already, which are the same width of the letters M and N respectively in any given typeface). In CSS, a font-size value of 1em acts as a multiplier on the calculated text size from all of your current element's parents.

For example, let's say you set your document up with the following CSS:

html {
    font-size: 10px;
}

h1 {
    font-size: 2em;
}

p {
    font-size: 1.5em;
}

The resulting font sizes would be 10px * 2 (or 20px) for the h1 tags, and 10px * 1.5 (or 15px) for the p tags.

It's important to remember that ems multiply all the way up from an element's parents. Take the following HTML and CSS:

<div>
    <p>Hello</p>
</div>

html {
    font-size: 20px;
}

div {
    font-size: 2em;
}

p {
    font-size: 1.5em;
}

Then the calculated font-size of your p tags would be 20px * 2 * 1.5, or 60px. See the working example below.

rems, or "root ems" work the same as ems, except instead of multipling all the way up the element tree, they jump directly to your root font size and multiply off of that. Let's take the same example as above, but use rems instead.

<div>
    <p>Hello</p>
</div>

html {
    font-size: 20px;
}

div {
    font-size: 2rem;
}

p {
    font-size: 1.5rem;
}

Here, the calculated font-size of a p tag would be 20px * 1.5, or 30px, because the divs font-size is ignored with rem.

vh and vw units, or "viewport height/width" units, are a different type of unit that refer to the height/width of the overall page. 1vw means 1% of the width of the viewport (i.e. the browser window). 30vw means 30% the width, and so on. You can use these units to make elements whose calculated size changes depending on the size of the browser window. See an example below and resize the window to see its behavior.

10vw font size

Web Safe Fonts

When specifiying a font-family, you need to make sure that the user has access to the font you wish them to see. There are a number of fonts that are known as "web safe," meaning that most computers already have them installed. You should always research how widely available a font is before choosing it for your design and be sure to provide a fallback in case a user is unable to load it. Note that some fonts that come default on a Mac or iPhone (e.g. Helvetica and Optima) are not available on Windows. Likewise, some default Windows fonts (e.g. Calibri and Century Gothic) are not available on Mac. Linux (or Android) users, depending on their setup, might not be able to see either.

The fonts generally considered to be "web safe" are Courier, Times New Roman, Arial, Verdana, Trebuchet MS, Georgia, Lucida Sans, Impact, Tahoma, and Palatino.

The final fallback styles not specific typefaces, but a general classification of style which the browser will use to pick the most appropriate installed font. They are cursive, fantasy, monospace, sans-serif, and serif.

External Fonts

This is an exciting time to be a web designer due to the number of fonts available. It wasn't until within the past 10 or so years that font foundries have begun licensing their typefaces for online use. In the past, web designers employed a number of tricks such as "text-image replacement" to use custom fonts, but now it is quite common for designers to load fonts in externally. Some services, like Google Fonts offer this for free. Others, such as Adobe Typekit or MyFonts offer paid licences (note that a Typekit plan is provided to you through your New School Adobe License). Some independent type foundries, such as Commercial Type, also provide licencing deals.

There are a few different ways that these fonts can be provided with your website. Some services will give you a JavaScript snippet to include on your site which will make your chosen font available as a font-family. Others will ask that you host and embed the font yourself using the CSS @font-face tag. For example, to load in Source Serif Pro earlier in the page, I used the following CSS:

@font-face {
    font-family: "Source Serif Pro";
    src: url("../fonts/SourceSerifPro-Regular.otf.woff2") format("woff2");
}

Read more about @font-face at the MDN documentation site.