Appykit-Blogs

Typography

• Its for hierarchy / Differentiation

• Difference Btw Fonts and Typefaces

  • Typeface → The collection of one Particular font Eg : The Typeface for the Project is Inter

  • Font → Detailed descprption of font properties Eg : The Font for the Project is Inter Bold 18px

• Types of font Familiy

1. Serif (with stroke)
2. Sans - Serif (Sans=No stroke)

Font properties

1. Font Weight
2. Leading - height of line or the gap btw two lines
3. Tracking - The gap between the letter
4. Kearning - Its similar to Tracking but can explicty set the spacing btw any letter
5. Ligatures - When two or more letter combine to form a glyph
6. Measure - The width of text/paragraph -> It should be 10 -14 words , more than 14 words can't be proceessed by the user
7. Rag - Its the shape that formed due the either left or right alignment
8. Widows - The one / two left out words at the end of paragraph
9. Orphans - The one or two seprated words ,at the begining of the sentence
10. Typography Scale - Its very important to maintain the consitence regard to sizes of font, Usually it will be 2x of the normal font Refernce ->font-scale.com
11. Timeless Fonts

Hard Fast Rule

1. Justify Left
2. use either one font or pair of diff category font
3. Choose typescale and maintain it

Tips to improve

1. Try to practice the Typography with one Font
2. See and compare the useCases of Good and Bad typography

Color Theory

60-30-10 Color Rule

• 60% - Dominant Color
• 30% - Secondary Color
• 10% - Call to Action Color