Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[DevDay2019] Spacing and Typography, keys to a professional UI design - By Nguyen Huu Duong, Full-stack Developer at Axon Active Vietnam

30 views

Published on

In this talk, you will learn UI Design Theory and the Basic Principles of Typography and Spacing, create elegant Web & Mobile app design by selecting and pairing meaningful Typography and know how to use spacing effectively and balance your design. You will achieve the experience and knowledge to take UI design fundamentals and apply them in your everyday life.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[DevDay2019] Spacing and Typography, keys to a professional UI design - By Nguyen Huu Duong, Full-stack Developer at Axon Active Vietnam

  1. 1. TYPOGRAPHY INTRODUCTION A. WHY? B. FONT AND TYPOGRAPHY TERMS C. TYPE CLASSIFICATION AGENDA T I M E & S L I D E 60 minutes 50 slides and 3 main sections Free resources TYPOGRAPHY SCALES AND GRIDS A. LINE LENGTH - LEADING - KERNING B. TEXT ALIGNMENT C. ROLE OF TYPEFACES & TYPOGRAPHIC HIERARCHY D. SPACING & BASELINE GRID TYPOGRAPHY SHOWCASES A. HOW TO SELECT FONTS TO THE WEBSITE B. SHOWCASES
  2. 2. Website. Apps. Book. TV. Magazine. WHY TYPOGRAPHY?
  3. 3. W H Y T Y P O G R A P H Y 95 % of design is Text. A great designer is good at Typography Text is the main part of media. e.g Websites, Apps, TV, Blog, Magazine… Type is a beautiful group of letters, not a group of beautiful letters.
  4. 4. Effectively arrange it for legibility and readability. 1A P U R P O S E O F T Y P O G R A P H Y Communicate or convey your message to the reader. 2 M A I N R E A S O N S
  5. 5. FONT, TYPOGRAPHY TERMS Font Family. Serif. x-height. Mean-line.
  6. 6. Font is a set of characters of specific style and size. The specific type of font í font style. FONT FAMILY FONT STYLE “ TIME NEW ROMAN. ARIAL. Segoe Script. SOURCE SERIF PRO. BOLD. ITALIC. REGULAR. MEDIUM. BLACK. Roboto Italic style with 30pt size Roboto Black style with 30pt size Roboto Condensed style with 30pt size Roboto Medium style with 30pt size 1B
  7. 7. We love Typography Cap-line Mean-line Base-line CAP, MEAN AND BASE-LINE
  8. 8. The height of letter x cap-height x-height “Most efficient x-height is 67-69% of cap-height CAP-HEIGHT AND x-HEIGHT
  9. 9. We love TypographyMean-line Base-line Descender Ascender ASCENDER & DESCENDER
  10. 10. We love Typography Closed Counter Open CounterClosed Counter Counter can help with legibility COUNTER (OPEN & CLOSE)
  11. 11. serif beak stroke ear terminal tailloop TYPOGRAPHY TERMS
  12. 12. TYPE CLASSIFICATION Font Family. Serif. x-height. Mean-line.
  13. 13. Serif typefaces are called “serifs” in reference to the small lines that are attached to the main strokes of characters within the face SERIF TYPEFACES The main characteristic of old style characters is their diagonal stress (the thinnest parts of the letters appear on the angled strokes, rather than the vertical or horizontal ones). TRANSITIONAL The differences between thick and thin strokes in transitional typefaces are more pronounced than they are in old style serifs. “ Time New Roman 1C
  14. 14. Serif typefaces are called “serifs” in reference to the small lines that are attached to the main strokes of characters within the face SERIF TYPEFACES MODERNSERIFS Have a much more pronounced contrast between thin and thick lines, and have a vertical stress and minimal brackets. SLAB SERIFS Have little to no contrast between thick and thin lines, and have thick, rectangular serifs, and sometimes have fixed widths. “ Didot American Typewriter 1C
  15. 15. Sans-serif typefaces are called such because they lack serif details on characters. Sans-serif typefaces are often more modern in appearance than serifs. SANS-SERIF TYPEFACES HUMANIST SANS-SERIF Have a much more pronounced contrast between thin and thick lines, and have a vertical stress and minimal brackets. TRANSITIONAL SANS-SERIF They have a relatively plain appearance when compared to the grotesques. “ Tahoma Arial, Helvetica 1C
  16. 16. Sans-serif typefaces are called such because they lack serif details on characters. Sans-serif typefaces are often more modern in appearance than serifs. SANS-SERIF TYPEFACES GEOMETRIC Geometric sans-serifs are more closely based on geometric shapes. Generally, the “O”s in geometrics will appear circular, and the letter “a” is almost always simple, just a circle with a tai “ Futura 1C
  17. 17. Scripts are based upon handwriting, and offer very fluid letter forms. Formal scripts are often reminiscent of the handwritten letterforms common in the 17th and 18th centuries. They’re common for very elegant and elevated typographical designs and are unsuitable for body copy. “ Casual scripts more closely resemble modern handwriting They're much less formal, often with stronger strokes and a more brush-like appearance 1C
  18. 18. LINE LENGTH, LEADING, KERNING Letter spacing. Line spacing. Characters
  19. 19. Line length is the distance between the left and right edges of a text block. Number of characters per line should be 45-85 characters per line or 10 -17 works per line. LINE - LENGHT LINE LENGTH
  20. 20. Too long lines: User need to move the head for long lines Too short lines: The eyes need to jump up and down many times to read. LINE LENGTH
  21. 21. Leading is the distance from one baseline to the next baseline. LINE-HEIGHT (LEADING) You fill an empty space deep in my life Cap-line Mean-line Mean-line Base-line Base-line line-height of body: 120-160%, line-height of heading : 100-110% 2A
  22. 22. Line height 130% (33px text) LINE-HEIGHT (LEADING) You have a special way of dealing with me and I’m sure you will always be there for me. You are my support and I can count on you. When troubled times face me, I feel secure because I have you. Line height 160% (33px text) You have a special way of dealing with me and I’m sure you will always be there for me. You are my support and I can count on you. When troubled times face me, I feel secure because I have you. 2A
  23. 23. LETTER SPACING (KERNING)2A
  24. 24. TEXT ALIGNMENT. Left. Right. Center. Justify.
  25. 25. B O D Y C O N T E N T EXAMPLE Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque est non enim.
  26. 26. S M A L L A M O U N T O F T E X T
  27. 27. C E N T E R - A L I G N E D Use for important lines: heading, tagline.. Use for few lines (maximum is 3 lines) D E V D A Y 2 0 1 9
  28. 28. A L I G N M E N T J U S T I F I E D
  29. 29. ROLE OF FONT, TYPOGRAPHIC HIERARCHY Heading. Body. H1, H2, H3. 1.618
  30. 30. C A P T I O N SUB-HEADING Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In vehicula est non enim. Nulla in mi eget purus hendrerit tempus. Pellentesque est non enim.
  31. 31. ROLE OF TYPEFACES USING THE ROLE OF FONT BY CORRECT WAYS Casper Bishop was thinking about Stanley Jones again. Stanley was a gracious volcano with pointy warts and grubby moles. APRIL 06,2019 Wrong Usage Of Heading Text As Body Text CASPER BISHOP WAS THINKING ABOUT STANLEY JONES AGAIN. STANLEY WAS A GRACIOUS VOLCANO WITH POINTY WARTS AND GRUBBY MOLES. APRIL 06,2019 2C
  32. 32. TYPOGRAPHIC HIERARCHY Typographic hierarchy organizing type that establishes an order of importance within the data, easily to find what they are looking for and navigate the content. 2C
  33. 33. TYPOGRAPHIC HIERARCHY STEP 1 SELECT BASE SIZE Basically, base size is the font size of paragraph or the font size of body text. E.g: 18px, 16px How much you want to scale the font for each level of typography. 1.333(perfect fourth), 1.618 (golden section), 1.5 (perfect fifth) STEP 2 SELECT SCALE RATIO 2C
  34. 34. TYPOGRAPHIC HIERARCHY Slowly title her had to farther been and lift anywhere expenses outlines power to while of for forest of like she like abundantly workmen. And particular, his without that outcomes been got various know headline slept it of be copy but little detailed instead, often hard solider Font Roboto Black 57px SUB HEADING, ROBOTO REGULAR 34PX H1 Heading 57px Small text 20px Body 26px H3 Heading 34px H2 Heading 44px BASE LINE = 26PX, SCALSE = 1.3 2C
  35. 35. TYPOGRAPHIC HIERARCHY H E I G H F I V E S M A L L E R H E A D I N G S C A L E R A T I O BODY TEXT 2 6 P X BASE SIZE 1.333 R E A D A B I L I T Y A N D L E G I B I L I T Y PERFECT FOURTH 2C
  36. 36. SPACING AND BASELINE GRID Vertical Rhythm. Harmony.
  37. 37. Vertical rhythm or vertical spacing use to layout the text and design the elements to create harmony VERTICAL RHYTHM
  38. 38. It base on base font size multiplied by line-height VERTICAL RHYTHM BASE SIZE = 18px LINE-HEIGHT = 1.5 BASE GRID SIZE = 18px * 1.5 = 27px
  39. 39. VERTICAL RHYTHM 2C
  40. 40. SELECT FONT FOR WEBSITE FUN. READING. BUSINESS. FASHION. ELEGANT
  41. 41. HOW MANY FONTS TO SELECT? Select 2 or 3 fonts Assign each font with roles
  42. 42. They don't have very sharp edges or something like this so this is a bit fun team a better relaxed looking top one is sensitive for. Funny Theme Mohr Rounded. Yikes Railey
  43. 43. If you are writing for some marriage ceremony or something like that you might go for the script font.
  44. 44. Select the very modern type to show something a bit serious and dramatic sensitive. TECH & BUSINESS THEME Roboto Open Sans
  45. 45. Using the very modern type of font with business website or design. Accent 3A
  46. 46. FUN. READING. BUSINESS. FASHION. ELEGANT
  47. 47. BLOG POST
  48. 48. D O Y O U H A V E QUESTIONS nhduong29 duong.nguyen@axonactive.comAxon Active is a Swiss offshore software development company with strong expertise in Agile IT and a large portfolio of successful international projects, ranging from small businesses to highly complex multi-platform systems for large corporate clients.

×