CSS, HTML

Midterm: WordPress MockUp Exercise Solution Part Two—Typography

Import the Fonts

The exercise said to use google fonts: Merriweather for serifs, and Lato for sans-serif.

While working out a layout, I will often include all the weights of the typeface. That way I can experiment to get the best treatment of type. Always remember, however, to go back into your document and edit the import declaration, removing any weights or fonts that aren’t used. Otherwise, you’re asking your user to download unused resources, which slows your site down.

So, from the google font repository, I would add this to my CSS:

@import url('https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic|Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic');

Use the Fonts

In doing any task, it’s a good idea to first take time to figure out what is being asked for. Look at the supplied screenshots and then look at the html file, and then try to style as much of the common typographic and stylistic concerns as concisely as possible. This saves time. It also makes cleaner code, because there are fewer styles to worry about.

For example, we can get a big chunk of the typographic basics done with only a few rules:

/* TYPOGRAPHY ==================================*/

body {
font-family: merriweather, georgia, times, "times new roman", serif;
font-size: 16px
}

.site-title, .site-tagline, .widget-title, .post-continue-button {
font-family: Lato, "arial narrow", sans-serif;
text-transform: uppercase;
}

article {
text-align: center;
}

article p {
text-align: left;
line-height: 1.6;
margin: auto 4%;
}

article h1 {
font-size: 1.5rem;
}

article .post-meta {
text-transform: uppercase;
font-size: .85rem
}

#site-footer {
text-align: center;
}

.post-continue-button {
font-size: .75rem;
color: indianred;
margin: 1.5rem auto;

}
.widget-title {
color: indianred;
margin-bottom: 0;
font-weight: 100;
font-style: normal;
font-size: .85rem
}

/* LISTS & MENUS =====================================*/

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

ul a {
text-decoration: none;
color: #777;
}

So where does that leave us?

 

Midterm: Typographic Basics

Midterm: Typographic Basics

We still have some tweaking to do, primarily with font-weights, spacing, and sizing, but I’ll leave that to you.

Next up: implementing the icon fonts and the JavaScript.

Standard