Typography
Post date: Jan 25, 2016 3:4:42 PM
To begin with, here is light-hearted video showing how serious typography choices can be to designers:
1. Watch the video below.
2. Here is the lesson that the above video is based on. Open this in a new tab or window so you can refer back to it.
3. Create a new Photoshop document (File > New). Choose Letter for the document type so that it makes an 8.5" x 11" document. Name it Typography in the upper right.
4. Change your workspace so it is Graphic and web
You will use the Character Pallet for most of the adjustments in this assignment.
4. Select the text tool
and click near the top of the document and type the word "Serif"
Change the font to a font with serifs and make the text large and black like below:
Trick: If you want your text to be confined to a certain part of your document you can draw the box that will contain the text with the text tool and then type your text.
5. Draw a text box and type "Sans Serif" in it. Change the font to a sans serif font and place it below the serif font like below.
6. Then, type a sentence above both and explain what a serif is and what sans serif means. Use the character pallet to make the font small and readable.
Pro Tip: Use View > Show > Grid (or Command - ') to turn on a grid that will help you to line things up better. This grid is only for lining things up and will not show on your final export.
7. Now create the words "Display Fonts" and find a display font that fits the word.
explain what display fonts are best for.
8. Find a couple examples of fonts you should avoid and put the name of the fonts in the font.
Explain why you should avoid them.
9. Create the word Leading in a big bold font. Then explain in a sentence what leading is.
Show examples of leading by doing the following:
Draw a box with your text tool to create a small box where two lines will fit.
Type the following:
If you ever draw a box and then type, but cannot see anything, it means your character is too big to fit the letters in the box. You will see a little plus sign in the bottom right corner. Grab this and make your box bigger to fit your font or change your character size.
10. Create the word Tracking in big bold letters, then put it's definition under it.
Create two words that have a different number of letters, but have the same length by adjusting the tracking on one of the words. Try to use two different words than in the example.
Like this:
Tracking is adjusted right below where leading was adjusted
11. Play the Kerning Game here. Use command-shift-4 to screenshot a word with bad kerning and a word with good kerning.
Create the word Kerning and Explain what kerning is. Then put the good and bad kerned examples under that.
Save your document as a .psd
You will try to make it look good tomorrow.
Friday 2/11
1. Create the word Typography at the top of your document for the title. and explain what it is. You can move your text layers around using the move tool if you have to.
2. Explain what hierarchy means and what it's useful for in typography. Do this using Hierarchy. Then, go back and make sure you are using good hierarchy for the title
3. Arrange all the text on the page to make it appealing and using the concepts of typography you have learned. Remember you can move and shrink text using command-t.
Post this to your website on your Photoshop page.
Some further reading if you are interested:
Read this webpage about typography: http://designshack.net/articles/graphics/8-rules-for-creating-effective-typography/