Web Typography

You can download these slides HERE

What we will cover

• What is typography?
• Why is it important?
• How do we recognize “good” typography?
• Improving our website “About Us” section

What we're not going to do:

“Web Design is 95% Typography.”

Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A work which cannot be read becomes a product without purpose.

What makes good type?

1. Typefaces that say what the words say

Typefaces have personalities

Lorem ipsum dolor sit amet, consectetur adipisicing.

Lorem ipsum dolor sit amet, consectetur adipisicing.

Lorem ipsum dolor sit amet, consectetur adipisicing.

Lorem ipsum dolor sit amet, consectetur adipisicing.

Typefaces have personalities

Typeface Pairing

(fonts that go together)

Pairing typefaces is much like choosing flavors at an ice cream shop. We know about common “go-to” pairings like chocolate with vanilla, but we try to find inspiring combinations where each flavor highlights something special about the other.

Advice for getting started:

• You should rarely need more than two typefaces
• Don't choose fonts that are too similar
• Consider staying within a “type family”
• Look for contrasting traits, not conflicting personalities

Let’s choose some typefaces!

• Google Fonts
• Typekit
• Inspiration: Google Font Pairing
• Inspiration: Just My Type

So, what else makes good type?

Line length?

• line length readability
• typography generator

Let's get to work!

Get our content set up

• Personal photo
• Get some real text in there
• "primary" paragraph
• title and "secondary" paragraph

<div class="body-type">
	<p>Zachary Kain is a hardware, software and thought-ware maker on the @heistmade
	crew. He works as a designer & writer creating compelling new media experiences, and
	devotes his spare time towards making humanity smarter through creative and technical
	education.</p>

	<h3>My Ethos</h3>

	<p>Believe in community. Learn from your peers every day, and every day aim to teach someone in turn. It is important to remember where we come from, and how we arrived where we are.</p>

	<p>Be mindful of the artifacts and culture you create; strive to uphold principles of accessibility, durability and social sustainability. Ply your trade in the service of positive change.</p>
</div>	
					

Add a class of profile-img to your profile photo

<img class="profile-img" src="images/photo_zak.jpg">

Let's spruce up our paragraph a bit

#about .body-type {
	font-family: "Droid Serif", serif;
	font-size: 14px;
	line-height: 1.6;
}
					

CSS Columns

Let's turn our big text block into a newspaper-inspired column layout

#about .body-type {
	column-count: 2;
	column-gap: 40px;
	column-rule: 1px solid lightgrey;
}
					

Make sure it works in all browsers

Some browsers need a special version of the "column" rules to make it work:

/* Chrome, Safari, iPhone, etc */
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-webkit-column-rule: 1px solid lightgrey;

/* Firefox */
-moz-column-count: 2;
-moz-column-gap: 40px;
-moz-column-rule: 1px solid lightgrey;

/* Internet Explorer */
column-count: 2;
column-gap: 40px;
column-rule: 1px solid lightgrey;
					

Wranglin’ that profile image!

#about .profile-img {
  float: left; /* push the image to the side */
  margin-right: 30px; /* make some space between the image and our text */
  max-width: 150px; /* restrict the size of the image */
  box-shadow: 0 0 4px 2px lightgrey; /* add a nice subtle shadow */
}
					

Here's where we are so far:

Pretty good, right? But let's push it further!

Let's beef up that first paragraph

<p class="larger">
    Zachary Kain is a hardware, software and
    thought-ware maker on the @heistmade crew. He works as a
    designer & writer creating compelling new media experiences, 
    and devotes his spare time towards making humanity smarter 
    through creative and technical education.
</p>

Now let's style that "larger" paragraph

    #about p.larger {
        /* font size and line height */
        font-size: 1.25em;
        line-height: 1.5;

        /* little refinements and details */
        font-weight: 400;
        font-style: italic;
        letter-spacing: -0.01em;
    }

Fixing up the left column

• Extra space at the top of the column
• headline should be in column 2

Let's get those tweaks done!

/* remove the space on top of paragraphs */
#about p {
	margin-top: 0;
}

/* fix up that sub-heading */
#about h3 {
	margin-top: 0;

	font-family: "Oswald", sans-serif;
	font-weight: 700;
	text-transform: uppercase;

/* BREAK a new column BEFORE this element */
	-webkit-column-break-before: always;
	-moz-column-break-before: always;
	column-break-before: always;
}
					

OK, how are we feeling?

Responsive Design Bonus Round!

How do we do responsive design?

"Media Queries" let us write CSS that only works at a certain screen size. They look like this:

@media (max-width: 800px) {
	
	#about {
	  background: red;
	}

}
					

Let's find out where our site starts looking wonky

First "breakpoint," 1100px wide

At around 1100px wide, our .larger text starts breaking down

First "breakpoint," 1100px wide

@media (max-width: 1100px) {
	
	#about .profile-img {
	  max-width: 40%; /* make the image wider */
	  margin: 0 auto 40px; /* give it some space on the bottom */
	  display: block; /* make sure it pushes down our paragraphs */
	  float: none; /* remove the float we put on earlier */
	}

}

					

Second "breakpoint," 800px wide

At around 800px, 2-columns gets a bit cramped

Second "breakpoint,", 800px wide

@media (max-width: 800px) {

      #about .body-type {
      	/* take our block down to one column, from two */
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
      }
    
      #about p.larger {
      	/* give our larger paragraph some bottom space */
        margin-bottom: 2em;
      }

}
					

Final "breakpoint,", 480px

Final "breakpoint,", 480px

@media (max-width: 481px) {

      #about {
        padding-left: 20px;
        padding-right: 20px;
      }
    
}
					

Looks like we're done, folks!

“Web Design is 95% Typography.”

Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A work which cannot be read becomes a product without purpose.

Thank you!

You can download these slides HERE