Podcast Awesome

The Great Debate: Web Fonts vs. SVGs – Which Should You Use? It Depends


Listen Later

In this episode of Podcast Awesome, Matt and Rob take you on a wild ride through the evolution of web icons — because who doesn’t love a good glow-up story? From the pixelated mess of Geocities and MySpace days (RIP low-res images) to the sleek world of custom web fonts and SVG's moment in the sun, they break down each tech's pros and cons so you don’t have to.

Ever wondered how icons went from blurry to brilliant? We've got questions and Rob’s got the answers! He explains how web fonts came in like a hero to save the day, improving performance and making your designs look sharp when retina screens appeared on the scene. But wait—SVGs are here too, offering even more flexibility, accessibility, and crispness for those big graphic-heavy projects. Plus, with Font Awesome Kits, you’ll learn how to easily mix and match your icons for peak performance without breaking a sweat.

So. What kind of icon is best for your project — Webfont or SVG. Rob dodges the dogmatism and simply says, "well, it depends."

Key Takeaways:

  • Evolution of Icon Technology: An overview of the shift from low-resolution images to web fonts and SVGs, highlighting their impact on web design.
  • Pros and Cons: Detailed comparison of the advantages and disadvantages of web fonts and SVGs, including aspects like performance, accessibility, and usability.
  • Font Awesome Kits: Explanation of how Font Awesome Kits help developers navigate between web fonts and SVGs, offering features to optimize icon usage.
  • Accessibility and Semantics: Discussion on the importance of accessibility and semantic considerations in choosing icon technology.
  • Practical Advice: Guidance on how to decide between web fonts and SVGs for specific projects, with practical examples and insights.


    Timestamp Summary
    0:09 | 🌐 The Evolution of Icon Tech on the Web
    2:16 | 🖼️ Evolution of Web Icons from Images to Custom Fonts
    7:33 | ⚡ Web Fonts Versus SVGs for Faster and Accessible Icons
    12:13 | 🔍 Choosing Between SVG and Other Formats Depends on Your Project
    13:01 | 🎬 Web Fonts Versus SVG: Pros and Cons for Icon Animation
    15:40 | 🛠️ Making Web Fonts Accessible with Font Awesome Kits
    16:57 | 🎨 Advantages and Challenges of Using SVGs for Web Icons
    20:17 | 🚀 Optimizing Font Awesome: Web Fonts vs SVG
    26:40 | 🔧 Simplifying Font Awesome Upgrades with Kits
    28:27 | ✅ Making the Right Choice: SVG Versus Web Font

    Podcast Awesome: https://www.podcastawesome.com/
    Font Awesome Pro:  Level up with Font Awesome Pro!
    Webfont or SVG: Well, it Depends: https://blog.fontawesome.com/svg-or-webfont/
    https://fontawesome.com/plans
    Twitter: @fontawesome
    The Podcast Awesome theme song was composed by Ronnie Martin: https://ronniemartin.org/
    Audio mastering by Chris Enns at Lemon Productions: https://www.lemonproductions.ca/

Stay up to date on all the Font Awesomeness!

...more
View all episodesView all episodes
Download on the App Store

Podcast AwesomeBy Font Awesome

  • 4.7
  • 4.7
  • 4.7
  • 4.7
  • 4.7

4.7

7 ratings


More shows like Podcast Awesome

View all
ShopTalk by Chris Coyier & Dave Rupert

ShopTalk

503 Listeners

The Daily by The New York Times

The Daily

111,088 Listeners

Syntax - Tasty Web Development Treats by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Syntax - Tasty Web Development Treats

986 Listeners

Darknet Diaries by Jack Rhysider

Darknet Diaries

7,951 Listeners

Waveform: The MKBHD Podcast by Vox Media Podcast Network

Waveform: The MKBHD Podcast

5,923 Listeners

devtools.fm: Developer Tools, Open Source, Software Development by Andrew Lisowski, Justin Bennett

devtools.fm: Developer Tools, Open Source, Software Development

26 Listeners

The Mel Robbins Podcast by Mel Robbins

The Mel Robbins Podcast

19,692 Listeners