This is a set of starter files and resources for the Typography ESD at Startup Institute Boston and the Typography & Grid Challenge in the AUX program at Fresh Tilled Soil. Students going through this lesson should fork the repo so that it shows up in the repo's network for evaluation by the instructor.
Please push your repo to a gh-pages branch so it has a URL that can be shared in class on the day of the lecture.
Presentation slides are hosted on Speakerdeck.
The supplied PDF has the string hamburgefontsiv written on it in several typefaces, but each page is missing a different letter. For each page use the existing characters as a reference to draw the one that is missing. An answer key PDF has also been supplied, which can be referred to after the exercise in order to check performance.
Please photograph your work and place the images in the /submit-exercises folder in this repo.
Choose two words and create a typographic treatment for them that visually reinforces their meaning/relationship. Start by creating at least 5 different sketched compositions of the same word pair. Pick one sketch and use any graphics editor, or pen/pencil, to develop it into a more finished and polished composition.
Please photograph your work and place the images in the /submit-exercises folder in this repo.
- A List Apart — On Web Typography
- Net Magazine — Better Web Typography in 13 Simple Steps
- Typecast Blog — Contrast Through Scale
- Smashing Magazine — Setting Weights And Styles With The @font-face Declaration
- A List Apart — Fluid Grids
- CSS Tricks — Don't Overthink It Grids
- Thinking With Type — Mixing Typefaces
- Web Typography — Choose a basic leading that suits the typeface, text and measure
- Web Typography — Add and delete vertical space in measured intervals
- Web Typography — Choose a comfortable measure
- Web Typography — Don’t letterspace the lower case without a reason
- Web Typography — Don’t compose without a scale
- iA Writer Blog — Responsive Typography: The Basics
Using the starter code in this repo, which contains typical article markup, implement a basic grid and a set of type styles that demonstrates the skills you’ve learned.
Requirements
- The grid should have at least one breakpoint. Your small-screen breakpoint should use a different number of columns than your larger-screen breakpoint.
- Alignment of elements should demonstrate the grid in use. Do not build a 5 column grid and then stack all of your content without using the grid.
- You must use at least 2 typefaces. The resources section links to Google Web Fonts. You can use any other service available to you, but the easiest for this exercise will be Google Web Fonts.
- You must apply the system to a second article to demonstrate that it works properly. You will likely have to rewrite the markup of whatever article you choose to match the demo markup you've been supplied with.
Bonus Points
Set up and use SASS for this lesson. Be prepared to explain exactly what was improved by your use of SASS.