Understanding the fundamentals of how to set type on the web is an important part of graphic design in a digital environment. In this exercise, we’ll talk about some organizational patterns you can use in your code to help make wrangling typography easier.
Objectives
Practice setting type using HTML/CSS
Assignment
Choose a Wikipedia article and copy the basic content of the article into your own HTML file.
Use custom fonts and CSS to style the text.
We’ll work together as a group at the beginning of each step listed below, discussing the overall topic. Then, you’ll have time to work through that step until we regroup and continue on.
Step 1 – Find an Article: 20 minutes(regroup at 10:45)
Pick a Wikipedia article of your choosing. You will typeset this article and try to maintain a content hierarchy that reflects the intention of the original article(or maybe it doesn’t). The article you choose should have enough sections and content to allow you some flexibility with how you style your page. The article on Beastie Boys has a good range of content, but your article doesn’t need to be quite so long.
Create a new directory in your local GitHub repos for this exercise. You’ll need an index.html and a style.css file to get started.
Add the HTML structure of your Wikipedia article to your index.html file, making sure to use semantic HTML where possible. Proper use of headings, paragraphs, lists, etc. should give you a good representation of the default hierarchy.
Try to keep your basic HTML well formatted and indented so it’s easy to edit.
Step 2 – Find a Font: 15 minutes(regroup 11:15)
Find a font(or multiple fonts, but you can’t use websafe fonts for this exercise).
Use a Google Font.
Use a Custom Font – for purchase, or test out by searching GitHub.
Add the font to your site and make sure it’s linked properly.
Start by analyzing your text and figuring out the hierarchy you’d like to create. Then, use CSS class names to create a reusable system that makes applying your type styles to your HTML easy.
Make sure you have Chrome DevTools open to help make experimenting with the type styles easier.
Once you have your type styles set up, edit your index.html and apply the CSS classes to your different sections.
Make sure to consider the overall width of your text. Typically it’s hard to read text that runs over 100 characters per line.
You may also consider adding some overly stylized embellishments like drop caps, block quotes, etc. to give yourself a challenge.
Objectives
Assignment
Resources
Step 1 – Find an Article: 20 minutes (regroup at 10:45)
Step 2 – Find a Font: 15 minutes (regroup 11:15)
@font-face { font-family: 'burgess-regular'; src: url('../fonts/burgess-regular.woff') format('woff'), url('../fonts/burgess-regular.woff2') format('woff2'); font-weight: normal; font-style: normal;}Step 3 – Create an HTML/CSS System
.body-text { font-size: 16px; letter-spacing: 0; line-height: 1.4; font-family: 'burgess-regular', serif;}
.title { font-size: 32px; letter-spacing: 1.2px;