Meaningful Mobile Typography

:rocket: Meaningful Mobile Typography

  1. Sans serif typeface is easier to read on the screen .
  2. Text color mostly used : { Black -- White -- Gray }.
  3. Common text color that mostly used : { #ododod -- #0f0f0f -- #141414}.
  4. Use some spaces between words to add more readability to your website .
  5. Line height as Golden Ratio = 1.618.
  6. Add alignment : Left -- Center -- Right .
  7. Avoid : Justify text.
  8. Use Left alignment for larger blocks of text.
  9. Use Center alignment for short bit of a text or special.
  10. Try to mixing Center and Left justified option.
  11. If text is aligned well , users will easly be able to consume your content .
  12. Users should not have to pinch and zoom to read the words on the screen .
  13. Creating hierarchy for most designs , from Left to Right & Top to Bottom .
  14. The visual hierarchy need just two or three level of typography :

    1. ----- Headline .
    2. ----- Byline .
    3. ----- BodyText .
  15. You can use :

    1. ----- Headline ===> Sans serif .
    2. ----- Byline ===> Serif .
    3. ----- BodyText ===> Serif .
  16. Responsive text you must use : rem -- em .