Typography Sample

What is this?

This page contains several common tags that you will see on almost any web page. The goal is to style all of the type here so it looks good and reads well.

Get started by looking at the page without any styles. Next apply some styles. Use your judgement and get feedback from anyone available. Listen to what people think and and apply their suggestions.

At this step you will mostly be styling elements. That is you will writing styles where the selector is a tag.

For example:

body {
  ...
  color: #eee;
  ...
}

h1 {
  font-size: 2.5em;
}

etc.

Challenges

Read the challenges and follow the instructions for each. You will be styling this document along the way. Keep your eye on it and make it look the best you can.

---

Challenge 1 - Create a stylesheet

Create a new stylesheet and link it to this document.

This will be the base stylesheet for your framework. Any developer should be able to link to this stylesheet and get all of your base styles and produce and produce an HTML document that looks better than the default styles provided by the browser.

---

Challenge 2 - Define a base font style

Define a font style by setting rules on the body element in your stylesheet.

Set font-family to a font-stack or a custom font.

Set the font-size and line-height to make the text read well in the browser. Use your best judgment here.

---

Challenge 3 - Define heading styles

Define styles for the H1-h6. Do this by setting them to a value in ems. For example: h1: 2.5em. You can also set the weight and color if you think it will look better. Larger type gets more attention for the size this can be softened by decreasing the contrast by using a lighter color.

Headings are meant to lead in or label a section. We use them not because the text is larger but because we want to call attention to the name of a section, label, or big idea on the page.

Take a look at the headings Bootstrap uses. Foundation headings are also worth looking at. Emulate these in your design. Define your heading styles and look at the headings below and the headings used throughout this document to see how your styles look.

---

Challenge 4 - Style inline elements

Inline elements add nuance and expression to the text.

Inline elements include the strong (use for important text), em (add emphasis), abbr (abbreviation), del (deleted, mark something has been deleted), s (strike-through, use for text that is no longer correct), and mark (hightlighted text). Developers will use these to increase the communication and nuance of the language written on a page. Look at this document, you will see many of these tags used.

Style the tags below and look at the sample text and other text on this page to see how your styles are working. You can stick with the default style or add your own rules. You can style the font-weight, color, background-color, text-decoration and anything else you can think of.

Take a look at Bootstrap's inline elements.

---

Challenge 5 - Color

Color is important. By default text is black and the background color of the page is white. This is rather harsh and doesn't look that great. You can do better!

Style the color and background-color on the body tag in your stylesheet. Use colors with good contrast. Check your colors with the contrast checker.

---

Challenge 6 - Links

Links are important. They need to stand out from the text around them and let visitors know that something is clickable and will lead to more information.

Links by default are blue and have an underline. You can change both of these things for an improvement! Links also have styles that apply to their interactive states - :hover, :active, and :visited. You should set a style for each of these.

You should style the :hover, :active, and :visited pseudo classes. Read about these here.

---

Challenge 7 - Blockquotes

Blocks quotes are used present a quoted block of text. Usually, you'll also add a citation which says where the quote came from or who it is attributed to.

The blockquote is a tag used to say something is quoted from another source. The cite tag is used to reference the author or source of a creative work. When including quoted work you'll usually use both in conjunction with these to make a good looking blockquote. Take a look at the markup used by Foundation and Bootstrap. Then write some styles for the blockquote and the cite tag when it appears inside a blockquote. Keep your eye on the example blockquotes below. I've marked up the quoted text below with the p and cite tags inside the blockquote.

The blockquote default style includes (a lot of) margin on the left and right. You can change this if you like! Take a look at some these examples for ideas.

---

Challenge 8 - Divider styles

The hr tag (horizontal rule) draws a line across the page. It signifies a division in the page. This could be a thematic shift or change of topic.

By default the hr has a border style. You can change it! Take a look at some of these hr ideas.

---

Challenge 9 - Lead style

Sometimes we will want to have a lead style. This can be the first paragraph in section or just an alternate style to make a paragraph standout. Take a look at how Bootstrap uses lead.

Style "lead" by styling the class: lead. Easiest is to change the font-size, and or color.

.lead {
  /* Your styles */
}

---

Challenge 10 - Muted text

Sometimes you'll want to create some text that feels secondary to the text it is paired with.

Follow Bootstrap's example. Use a class name: .text-muted. You can see this style used in the second half each heading on this page and in the sample text below.

.text-muted {
  /* some styles here */
}

Challenge 11 - Navbar