Hey everyone, I have been diving into design principles and just thought I would give a quick write up on something I learned that has helped me immensely with font decisions throughout my app.
Looking through my styles I had about 40-50 different text elements which is not great and possibly some of you have experienced similar.
So my favorite design principles are Ant Design’s. https://ant.design/docs/spec/font which are basically this.
All fonts should be centered vertically.
Use 1 font for all your copy with a base height of 14.
Use another for everything else (titles, links, headings, tables, sections).
As seen in the below screen shots there are also easy to follow principles on opacity as well as line height. Using these principles I was able to get my styles down to 8 with variants for alignment and color only.
So for my final style sheet as an example I settled on
Primary Copy Roboto (size: 14px, #000000 opacity 65%, Line spacing 1.6, centered vertically)
Secondary Copy Roboto (size: 12px, #000000 opacity 45%, Line spacing 1.6, centered vertically)
Footer Copy Roboto (size: 10px, #000000 opacity 45%, Line spacing 1.8, centered vertically)
Heading 1 Arial Bold (size: 36px, #000000 opacity 85%, Line spacing 1.2, centered vertically)
Heading 2 Arial Bold (size: 30px, #000000 opacity 85%, Line spacing 1.3, centered vertically)
Heading 3 Arial Bold (size: 24px, #000000 opacity 85%, Line spacing 1.3, centered vertically)
Heading 4 Arial Bold (size: 18px, #000000 opacity 85%, Line spacing 1.4, centered vertically)
Heading 5 Arial Bold (size: 14px, #000000 opacity 85%, Line spacing 1.5, centered vertically)
This handful of styles has met every situation I thought I needed those 40 styles for before and made development much faster and more pleasant. Hopefully this helps someone, thanks.
