[DevDay2019] Spacing and Typography, keys to a professional UI design - By Nguyen Huu Duong, Full-stack Developer at Axon Active Vietnam
1 like326 views
The document provides an introduction to typography, covering its importance in design, various font classifications, and key typography terms. It discusses typographic hierarchy, line length, leading, kerning, and text alignment, and highlights the roles of different typefaces in effective communication. Additionally, it emphasizes the need for a careful selection of fonts based on context and usage to enhance readability and aesthetic appeal.
![[DevDay2019] Spacing and Typography, keys to a professional UI design - By Nguyen Huu Duong, Full-stack Developer at Axon Active Vietnam](https://image.slidesharecdn.com/duongnguyen-typographyspacing-190408082945/85/DevDay2019-Spacing-and-Typography-keys-to-a-professional-UI-design-By-Nguyen-Huu-Duong-Full-stack-Developer-at-Axon-Active-Vietnam-1-320.jpg)
![[DevDay2019] Spacing and Typography, keys to a professional UI design - By Nguyen Huu Duong, Full-stack Developer at Axon Active Vietnam](https://image.slidesharecdn.com/duongnguyen-typographyspacing-190408082945/85/DevDay2019-Spacing-and-Typography-keys-to-a-professional-UI-design-By-Nguyen-Huu-Duong-Full-stack-Developer-at-Axon-Active-Vietnam-2-320.jpg)
[DevDay2019] Spacing and Typography, keys to a professional UI design - By Nguyen Huu Duong, Full-stack Developer at Axon Active Vietnam
- 3. 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
- 4. Website. Apps. Book. TV. Magazine. WHY TYPOGRAPHY?
- 5. 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.
- 6. 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
- 7. FONT, TYPOGRAPHY TERMS Font Family. Serif. x-height. Mean-line.
- 8. 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
- 9. We love Typography Cap-line Mean-line Base-line CAP, MEAN AND BASE-LINE
- 10. The height of letter x cap-height x-height “Most efficient x-height is 67-69% of cap-height CAP-HEIGHT AND x-HEIGHT
- 12. We love Typography Closed Counter Open CounterClosed Counter Counter can help with legibility COUNTER (OPEN & CLOSE)
- 13. serif beak stroke ear terminal tailloop TYPOGRAPHY TERMS
- 14. TYPE CLASSIFICATION Font Family. Serif. x-height. Mean-line.
- 15. 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
- 16. 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
- 17. 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
- 18. 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
- 19. 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
- 20. LINE LENGTH, LEADING, KERNING Letter spacing. Line spacing. Characters
- 21. 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
- 22. 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
- 23. 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
- 24. 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
- 26. TEXT ALIGNMENT. Left. Right. Center. Justify.
- 27. 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.
- 28. S M A L L A M O U N T O F T E X T
- 29. 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
- 30. A L I G N M E N T J U S T I F I E D
- 31. ROLE OF FONT, TYPOGRAPHIC HIERARCHY Heading. Body. H1, H2, H3. 1.618
- 32. 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.
- 33. 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
- 34. 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
- 35. 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
- 36. 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
- 37. 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
- 38. SPACING AND BASELINE GRID Vertical Rhythm. Harmony.
- 39. Vertical rhythm or vertical spacing use to layout the text and design the elements to create harmony VERTICAL RHYTHM
- 40. 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
- 42. SELECT FONT FOR WEBSITE FUN. READING. BUSINESS. FASHION. ELEGANT
- 43. HOW MANY FONTS TO SELECT? Select 2 or 3 fonts Assign each font with roles
- 44. 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
- 45. If you are writing for some marriage ceremony or something like that you might go for the script font.
- 46. Select the very modern type to show something a bit serious and dramatic sensitive. TECH & BUSINESS THEME Roboto Open Sans
- 47. Using the very modern type of font with business website or design. Accent 3A
- 48. FUN. READING. BUSINESS. FASHION. ELEGANT
- 49. BLOG POST
- 50. 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.