11. Wait! I am an artist. Why should I care
about some design system?
Less Decisions – Faster Designing – Focus on What Matters
Visual Consistency
Evolution Instead of Revolution(s)
👍
👍
👍
20. font-size: 13px
line-height: 16px
Possible grid numbers:
👉 4px
👉 8px
👉 16px
😎 and have a good feeling from text bounding boxes perfectly aligned inside of your grid
font-size: 13px
line-height: 18px
font-size: 13px
line-height: 20px
Possible grid numbers:
👉 6px
Possible grid numbers:
👉 4px
Or use your body text line-height
21. Always choose even grid number
https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632
22. 2px 24px
too many options too restrictive
And avoid too small / too big numbers
45. Modular scale generators look cool,
but can be tricky
“I need something between this
and this”
https://type-scale.com
46. Medium Type RatioHigh Type Ratio Low Type Ratio
https://medium.com/sketch-app-sources/exploring-responsive-type-scales-cf1da541be54
Marketing Site Blog / Info Site Product Site
When using modular scale, choose
the one based on your project
81. Align strokes to pixel grid
https://spec.fm/specifics/8-pt-grid
In the end, every object of your UI will be displayed as a bunch of pixel (even vector ones)
https://blog.ginetta.net/i-set-out-to-create-pixel-perfect-
icons-heres-what-i-discovered-along-the-way-
4e46378932df
82. Always use bounding box with a safe zone
https://www.smashingmagazine.com/2016/0
5/easy-steps-to-better-logo-design/
https://blog.ginetta.net/i-set-out-to-create-
pixel-perfect-icons-heres-what-i-
discovered-along-the-way-4e46378932df
83. Consider using grid when drawing icons
https://material.io/design/iconography/#grid-keyline-shapes
84. Use icons in intended size
https://refactoringui.com/book/
85. If you need the same icon in more sizes, create more versions of the
same icon or place icon into some space around
https://twitter.com/i/moments/994601867987619840