Day 2: Web Typography and Floated HTML Images

Reminders for Tony

  1. Put on mic
  2. Open Zoom chat
  3. Record! Anyone else?

Topics Covered

Goals

Today, we will take the blog post from yesterday and then:

  1. add some custom fonts;
  2. customize: font size, line height and line length;
  3. add an HTML image to our text;
  4. float the text around the image.

Lecture/Live-code: Web typography

Using the text example from yesterday, we will:

  • Use the font inspector to investigate the font settings of a website.
  • Change the default font.
  • Balance font-size, line length (width) and line-height
  • Make it minimally responsive with max-width

[break]

Activity 1: Brute-force solution

This will be a paired activity.

The “blog post” you create can be on any topic but keep your text readable:

  • short paragraphs
  • lots of headings
  • bulleted or numbered lists where appropriate

Lecture/Live-code: Floated HTML image

Objectives

Continuing with your project, try the following:

  • Add a 300x300 pixel HTML image to your page using the img tag.
  • Float your text around the image using the float property.
  • A keyline is a print industry term for the 1px border you sometimes see around an image. Try adding one to your HTML image using the border property.
  • For fun, make the image look like a polaroid using the padding property.
  • Try rounding the corners of the image using the border-radius property.

[break]

Activity 2: Brute-force a solution

You will be working in pairs.

  • Repeat the steps your instructor just demonstrated.
  • Can you make a circular image using the border-radius property?
  • What other image effects do you see online that you’d like to try?

Mid-day Huddle

  • who needs help?
  • any pivots?
  • any show-and-tell?

[lunch]

Lecture 3: Code Walk-through

See the finished sample post:

  • What did we learn?
  • What are the best practices
  • What can be improved in your code?

Web Typography

Web typography usually starts with choosing a font pairing for headings and body text:

@import url('https://fonts.googleapis.com/css2?family=Karla&family=Raleway:wght@300;400&display=swap');

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

h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
}

Then we set up the “typography triad”: font size, line height (aka. leading) and line length. They all depend on your chosen font family and each other. Typographers coined the term “vertical rhythm” to describe the balance of text to white space on the printed page. The same principles apply here.

  /* browser default is usually 16px */
  font-size: 14px; 
  
  /* browser default is usually 1.2 (other length units allowed). Try for a minimum of 1.5, max should be less than 2 */
  line-height: 1.7; 
  
  /* line length: max for print should be 80-95 characters; */
  /* for web: aim for 25-75ch */ 
  max-width: 60ch;

Layout

Now that our text is balanced, let’s get our page balanced by centering the entire text block.

.center-box {
  /* This is centering from the outside of the box. This only works if the centered item is narrower than its parent. */
  margin: auto;
}

Imagery

Floating text around images has been done for centuries. It’s fallen out of style online but it’s a nice tool to have in your kit.

.image {
  float: left;
}

We can make the image circular and float the text to match:

.image {
  border-radius: 50%;
  shape-outside: circle(50%);
}

This is assuming the image is square. With other aspect ratios, border-radius: 50% will create an ellipse (which can be matched by shape-outside).

[break]

Activity 2: Optimize your code

This will be working in pairs.

  • what can be improved?
    • close your tags
    • use quotes for attribute values
    • fix your indentation
    • centre the text in the page with margin: auto
    • optional: try floating your text in a circle with shape-outside
    • optional: try validating your code with the W3C HTML validator

Summary

  • any trophies?
  • prep for tomorrow?
  • applause

Tags:

Categories:

Updated: