Fonts and Typefaces

Review the 6 Word Cloud Creators below using this Google Doc format https://docs.google.com/document/d/1zDQbsuvmswEddyBIHpm0yJJQKBxlyvYeOBpmjgYC_XI/edit?usp=sharing 

You can use one of the texts below to try out the Word Cloud Creators or choose a text of your own choosing.

• MLK I Have a Dream Speech - https://docs.google.com/document/d/1YqdiNsmD_eu7K6RsUmqliVlA00WUT76UZwt4liHbWzk/edit?usp=sharing 

• The History of ¡Si Se Puede!  https://docs.google.com/document/d/15lTpIYK1qkZZG01nhT54WPHNFxT5XACtu2GYdvNXwuk/edit?usp=sharing 

• The Gettysburg Address - https://docs.google.com/document/d/1_ZrgGABsE4QbvBK54i7VpA2SE4CN0kcFGCWriNKOPGE/edit?usp=sharing 

Here are the 6 Word Cloud Creators you will evaluate.

1. https://wordart.com/create 

2. https://www.wordclouds.com/ 

3. https://www.tocloud.com/ 

4. https://www.abcya.com/games/word_clouds

5. https://monkeylearn.com/word-cloud/

6. https://worditout.com/word-cloud/create

Font Classifications

• Serifs

  • fonts with characters that have attributes on the tips

  • attributes are referred to as feet

  • common uses body copy in printed text, typing professional documents, papers, etc.

  • easier to read

• Sans Serifs

  • fonts with characters that do NOT have attributes on the tips

  • NO feet

  • common uses headlines, copy on websites/screens

​

• Symbols and Decorative

  • designed to catch your eye

  • common uses: design elements in flyers, ads, etc. complementary font (meaning minimal use)

  • “Wingdings” for symbols and some AWPC Fonts

• Script Fonts

  • look handwritten

  • may be classified as serif or sans-serif font

Using Fonts to create a word cloud all about you 

1. Use Google Drawings

2. Go to this link and save your own copy - https://bit.ly/jjpcloud 

3. Your name should be the largest word in your word cloud.

4. Use 15 other words to describe yourself.

5. For your font colors, use black, any gray you like, and a color that will pop!

6. Use at least one serif font, one sans serif font, and one decorative or "fancy" font.

7. Each word should be a different combination of font type, font color, and font size.

8. To complete your assignment, use the checklist below to make sure you have everything you need.

   • _________ I made my name larger than all other text.

   • _________ I have 15 words that describe me.

   • _________ I only used black, gray, and one other color.

   • _________ I  used at least one serif font, one sans serif font, and one decorative or "fancy" font.

   • _________ Each word I  used has a different combination of font type, font color, and font size.

Font Character Anatomy

• https://youtu.be/tWFWJGA7qrc 

• https://youtu.be/15XKOlfj6GI 

• https://youtu.be/ZXGSyzCJpcQ 

• https://visme.co/blog/type-anatomy/ 

• https://totallytype.com/anatomy.php

• Just the Facts! - http://typedia.com/learn/only/anatomy-of-a-typeface/ 

More advanced concepts about type - http://thinkingwithtype.com/letter/ and https://webdesign.tutsplus.com/courses/an-introduction-to-typeface-styles/lessons/the-anatomy-of-a-letter-character 

A good basic introduction to type  - https://www.jotform.com/blog/a-crash-course-in-typography-the-basics-of-type/ 

Want to make some typography based art? https://createartwithme.com/font-styles-lettering-design-mixed-media-lesson/ 

Font Games!

• Kerning Font game - https://type.method.ac/

• Type war - http://typewar.com/

• Ragtime - https://fathom.info/ragtime/

• Name that font! https://ilovetypography.com/2020/05/31/the-font-game/

• Shape type - https://shape.method.ac/ 

For Fun - I shot the serif - https://www.tothepoint.co.uk/us/fun/i-shot-the-serif/

https://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380 

• Read the  Basic Typography Definitions - https://drive.google.com/file/d/13C1-ot_mioueLn9Y7FUDZNIBliL4oGf5/view?usp=sharing

• Play The Kern Game for 10 minutes -  The Kern Game - https://type.method.ac/ - 

• Play The Shaping Game for 10 minutes -  The Shaping Game - https://shape.method.ac/

• Create 5 Memes using text creatively -  Meme Generator - http://www.memegen.com/

Typography

Basic Typography Definitions

• Ascender- the part of a lowercase letter, as b, d, f, h, that rises above x-height.  A letter rising above x-height, as b, d, f, h, etc. 

• Descender- The part of a lowercase letter that goes below the body. A letter having such a part, as p, q, j,  or y. 

• Serif- A smaller line used to finish off a main stroke of a letter, as at the top and bottom of M. 

• Counter-The enclosed or partially enclosed circular or curved negative space (white space) of some letters such as d, o, and s is the counter. 

• Baseline-The imaginary line  on which the bottoms of primary letters align. 

• Cap Height- Refers to the height of a capital letter above the baseline for a particular typeface.  It specifically refers to the height of capital letters that are flat—such as H or I—as opposed to round letters such as O, or pointed letters like A, both of which may display overshoot.

• X-Height- The height of the small letters

• Sans Serif- A style of monotonal type without serifs. 

• Slab Serif- A type of serif typeface characterized by thick, block-like serifs.

• Blackletter- A heavy-faced type in a style like that of early European hand lettering and the earliest printed books. 

• Script-A type imitating handwriting

• Leading- The space between lines

• Tracking- The space between letters

• Kerning- The space between individual letters