COM372-14 : Web Design and Development

Typography

Lesson Number 18, October 6, 2014

Due For This Class

  1. Get Inspired - start looking around on the web for things that inspire you - projects you like, screenshots of other websites, articles that interest you. Start working on your Evernote journal. You should continue adding to this as the semester continues. On October 27, I will be asking you to write a brief overview of your journal, and another at finals.
  2. Complete the next two lessons in CodeCademy
  3. Read Chapter 5 (Mini-Art School) and Chapter 7 (Type) in White Space is Not Your Enemy.

Typography Video

Let's watch this 5 minute video about typography. (Click here to launch the video)

CSS Styling for Text

There are lots of ways to style text using CSS, more than we can cover just in this class. We've gone over a lot of the basics so far.

Color & Size

.myclass{
  color: red;
  font-size: 18px;
}

Example text #1

.myclass{
  color: blue;
  font-size: 2em;
}

Example text #1

Bold, italic, and underline

.myclass{
  text-decoration:underline;
  font-weight:bold;
  font-style:italic;
}

No "strong" or "em" tags needed!

(although I'm showing you how to underline here, it will CONFUSE YOUR VISITORS if you underline things that are not links. Avoid using underlines on non-linked things)_

Transform

.myclass{
  text-transform: uppercase;
}

Stop typing things in all uppercase - use text transform!

Font Family

Font family is a great way to make your website look a little fancier / add some personality to your website.

.myclass{
  font-family: sans-serif;
}

There are a number of generic font familys you should know. Generic family names include serif, sans-serif, cursive, fantasy, and monospace.

You can also use named fonts. Named fonts are read in the order they appear - the text will use the first available font from your list! You should always include a generic font family at the end of your font stack - in case the users computer has no custom fonts installed.

You can use any font you have on your computer, but you have to be careful because people who visit your website will also need to have that font installed to see your font. For example, open this website on your computer. The below text on my computer looks like it is written in a casual, handwritten font, but on your computer it will probably just be cursive.

.myclass{
  font-family: 'MF Be Yourself',cursive;
  font-size: 3em;
}

A Fun Font!

Font Stacks

As you're choosing your default fonts, it's important to try to find a font that will work for the majority of your viewers. You can do this by creating a font stack that uses fonts that most users will have installed.

There are some lists of great default font stacks at the website CSS Font Stack. You can read more about font stack at Smashing Magazine - and even more at A Way Back

Activity

Choose a default font stack for your website, and apply it to your entire page by adding the following CSS to your styles.css.

Don't forget to switch to your project portfolio folder!

body{
  font-family: ***MY Font Stack Here***;

}

You can also play around with some different CSS text styling effects here - http://csstxt.com/

Lesson Heading

Homework