Font Families and Font Stacking

In CSS, fonts are categorized into five distinct families:

1. Serif fonts: These fonts are characterized by tiny strokes at the terminations of each letter. They exude a feeling of sophistication and classic elegance.

2. Sans-serif fonts: Noted for their smooth lines without the additional strokes, these fonts give off a contemporary and minimalist vibe.

3. Monospace fonts: In this font family, every letter has a consistent fixed width, offering a structured and machine-like aesthetic.

4. Cursive fonts: These fonts are designed to resemble fluid human handwriting, giving a personal touch.

5. Fantasy fonts: As the name suggests, these are ornamental and whimsical fonts that add a playful element to the design.

Usually, serif fonts are preferred for prominent text such as headlines, due to their distinctiveness. On the other hand, sans-serif fonts are often chosen for the bulk of website content because they are simpler and easier on the eyes for reading. When showcasing computer code, monospace fonts are the go-to choice because of their consistent character width.

A font stack or font stacking is a list of fonts in the CSS font-family declaration. The fonts are listed in order of preference that you would like them to appear in case of a problem, such as a font not loading.

Here's an example:

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

In the above example:

1. The browser will first try to use "Helvetica Neue".

2. If "Helvetica Neue" is not available, it will try to use "Helvetica".

3. If "Helvetica" is not available either, it will try "Arial".

4. If none of the above fonts are available, it will default to the generic sans-serif font available on the system.

Font stacking ensures that the webpage appears as consistent as possible across different devices and browsers by providing fallback options.

Font Pairing

Font pairing is the strategy of merging two or more fonts in a design for harmony and readability. Often, contrasting fonts, such as a serif for headings (H1-H6) and a more legible sans-serif for body text, are chosen to distinguish different textual elements effectively. This is more art and can take some experimenting but think serif for the heading and sans-serif for normal text.

Leading, Kerning and Tracking

The term "leading" in typography is pronounced like "ledding" (rhymes with "wedding"). It originates from the days of hand-typesetting when strips of lead were placed between lines of type to increase the vertical distance between them, hence increasing the line spacing. The use of these lead strips allowed typographers to adjust the visual space between lines of text, making it easier to read and more aesthetically pleasing.

In modern typography, especially in digital design, "leading" refers to the distance between the baselines of consecutive lines of text. Even though we no longer use physical strips of lead in typesetting, the term has persisted and is now used to describe line spacing in both print and digital media. Adjusting the leading is crucial for ensuring readability and achieving the desired visual effect in textual content.

Quick Definitions

1. Leading: Refers to the vertical spacing between lines of text.

2. Kerning: Adjusts the space between specific letter pairs to improve visual appeal.

3. Tracking: Modifies the uniform spacing between all characters in a block of text.

Relevant CSS Property for leading: line-height

body {
  font-size: 18px;
  line-height: 1.5;  /* 1.5 times the font size */
}

This means the space from one baseline to the next will be 1.5 times the size of the current font. While you can use rems and pixels as a unit for line-height, it best to keep in unitless.

Kerning vs Tracking

According to Adobe

Kerning is the process of adding or subtracting space between specific pairs of characters. Tracking is the process of loosening or tightening a block of text.

Looking more into this around the Internet, it seems most people get both terms confused and use them interchangeably perhaps in part because with CSS we have limited control of the space between characters.

The letter-spacing css property

• Description: letter-spacing specifies the spacing between individual characters in text.

• Example:

    h1 {
      letter-spacing: 2px;
    }
  

  This will add a spacing of 2 pixels between each character in <h1> elements.

Quick Summary CSS Spacing Adjustments

In conclusion, there are two primary methods to modify character spacing:

1. Adjust the horizontal spacing between characters with the letter-spacing property.

2. Modify the vertical spacing between lines using the line-height property.

Quiz on Kerning, Tracking and Leading

Web Safe Fonts vs. Web Fonts: Understanding the Distinction

Arial, Verdana, Georgia, Times New Roman, and Courier are all examples of "web safe fonts". These fonts are pre-installed on almost every computer, device, and operating system.

Going by a slightly different name; Web fonts are hosted online and are downloaded by your browser when displaying a webpage. Web fonts, are either uploaded to your site for self-hosting or you could rely on a third-party services such as Google Fonts or Adobe Fonts.

Web font example - Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Use the Font in Your CSS:

• Now, in your CSS, you can specify "Roboto" as the font-family for any element.

body {
    font-family: 'Roboto', sans-serif;
}

The result is that when someone visits your website, their browser will download the "Roboto" font from Google Fonts and display the text in that font. This ensures that even if the visitor doesn't have "Roboto" installed on their machine, they'll still see the text in the desired font.

CSS commands for common text formatting

Bolding, italizicing, and underling are the three most common ways to manipulate text on the web. Here is a quick run down of how these operation work in CSS.

1. Bold:

   • CSS Property: font-weight

   • Values:

     • normal: Default weight (often equivalent to 400).

     • bold: Bold weight (often equivalent to 700).

     • Numeric values ranging from 100 (thinnest) to 900 (thickest). Not every font will have all weights, but commonly used weights include 300 (light), 400 (regular/normal), 500 (medium), 700 (bold), and 900 (extra bold).

   • Example:

       p.light-text {
           font-weight: 300;
       }
       p.bold-text {
           font-weight: 700;
       }
     

     The first rule will render the text in <p class="light-text"> with a light weight, and the second rule will render the text in <p class="bold-text"> as bold.

2. Italic:

   • CSS Property: font-style

   • Value: italic

   • Example:

       p {
           font-style: italic;
       }
     

     This will make the text inside the <p> element italicized.

3. Underline:

   • CSS Property: text-decoration

   • Value: underline

   • Example:

       p {
           text-decoration: underline;
       }
     

     This will underline the text inside the <p> element.

When using numeric values for font-weight, it's important to ensure that the specific font you're using supports the desired weight. Some fonts might only offer a limited range of weights.

<strong> and <em> HTML tags explained

In the early days of web design, visual formatting was often mixed with content. Tags like (for bold) and (for italic) were used. However, as the web evolved, there was a shift towards separating content from its presentation. This led to the development of tags that conveyed the semantic meaning or intent behind the formatting, rather than just the visual style.

<strong> vs. <b>

The <strong> tag was introduced to emphasize the importance of a piece of text, not just to make it bold. While visually, it often appears similar to the <b> tag (bold), the semantic meaning is different. implies that the enclosed text has strong importance within its context.

<em> vs. <i>

Similarly, the <em> tag was designed to indicate emphasis, whereas the <i> tag was purely for italicizing text. The <em> tag conveys that the text should be emphasized in its context, often making it stand out for emphasis.

Text Formatting with text-transform

The text-transform property allows us to adjust the casing of our text:

• For UPPERCASE:

    text-transform: uppercase;
  

• To Capitalize Initial Letters:

    text-transform: capitalize;
  

Why opt for text-transform instead of editing the HTML directly? By using CSS, we maintain the original text casing. Should we decide to revert from ALL CAPS in the future, we'd face a tedious task if we modified the HTML—having to edit each occurrence. With CSS, a single declaration change does the trick!

Adjusting Text Alignment with text-align

How do we handle the alignment of our text?

The text-align property lets us set horizontal positioning for characters. Here's how it's implemented in CSS:

p.left {
  text-align: left;
}
p.right {
  text-align: right;
}
p.center {
  text-align: center;
}

Using this CSS, the alignment of paragraphs in HTML would be:

<p class="left">
  This paragraph defaults to "left" alignment.
</p>
<p class="right">
  Contrarily, this one shifts to the right, reversing the default.
</p>
<p class="center">
  And this centers the content.
</p>

Although text-align can be used for aligning elements like images, it's typically best suited for text. For aligning non-text elements, other CSS techniques are more appropriate.

Final Test on text-transform, text-align and semantics meanings

Relevant Links

• Game to learn about Kerning - https://type.method.ac/#

• Abode on Kerning and Tracking - https://helpx.adobe.com/indesign/using/kerning-tracking.html

• https://fonts.google.com/ (Web Fonts)