/recommends

🗿 Typography, Fonts & Icons

  • Fonts
  • Icons

Typography is currently playing a central role in web design, with progressive improvements like Variable Fonts, CSS Shapes, FlexBox, CSS Grids and Subgrid definitively changing the way we work with typography in web design. More than 57% of all websites use custom fonts and the number is growing every year. The other "half" uses Web Safe / System Fonts, like Arial, Helvetica and Georgia, which are installed on every computer. What font you use will impact the personality of your product massively.
For example a Serif font is often used to express exclusiveness, professionalism, high quality. You see it a lot on clothing brands like Calvin Klein or Victoria's Secret. A Sans-Serif Font is associated with modernness, timelessness, cleanness and stableness. You see it a lot on the web, because it's easier to read than a Serif font in the online world. Other types are Script, Display, Monospace, and more.

Typography

Learning Typography

  • Typography Principals
  • Better Web Type - A web typography course for web designers and web developers by Matej Latin.
  • Practical Typography - If you learn and fol­low these five ty­pog­ra­phy rules, you will be a bet­ter ty­pog­ra­pher than nearly every writer.

Finding the prefect Font

  • Google Fonts - we all saw that coming
  • Adobe Fonts - A great place to get fonts if you already pay for the Adobe Creative Cloud.
  • FontSquirrel - a great place to get fonts if you don't have a license for the Adobe Creative Cloud.
  • 100 Best Free Fonts for Designers in 2021 - a fresh new article by Awwwards.
  • Typewolf - Typewolf is an independent typography resource created by Jeremiah Shoaf. The site gets over 350,000 unique visitors a month.
  • I love Typography - Shop for fonts: Explore the collection, filter and discover new fonts.
  • font in the wild - pretty self-explanatory.
  • Variable Fonts - A simple resource for finding and trying variable fonts.
  • typo/graphic posters - A platform for inspiration, research and promotion of good design through the poster medium
  • Type-01 - Covering a wide variety of topics, they use type as a gateway to open up important conversations and consistently spotlight the current and future generations of talented creative humans from all parts of the world.
  • 40 Excellent Free Fonts For Professional Design - A article by Smashing Magazine which should help you find great fonts.

Icons

Icons are one letter Words. They are used to represent actions, objects, and concepts. Everybody (who has a smartphone at least) knows the WiFi icon and based on the current state of the icon, we are able to tell if we have a strong connection or not. Based alone on three or four line, we know what it means us. Icons are helpful as long as their context makes sense. There are now some "universal" icons that everyone in the online world and beyond is familiar with, and just to name a few: Hamburger, Bluetooth, Bookmark, Loading, Map-Pin, Speaker, and many more.

Icon Packs