build/webfonts/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="color-scheme" content="dark light">
	<link rel="icon" href="data:,">
	<title>Stop Using Custom Web Fonts</title>
	<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
	<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}blockquote{background:rgba(0,0,0,0.1);border-left:4px solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>

<nav>
	<a href="#menu">Menu &darr;</a>
</nav>

<main>
<h1 id="stop-using-custom-web-fonts">Stop Using Custom Web Fonts</h1>
<p>2023-03-14</p>
<p>I recently read an excellent post by Manu Moreale titled <a href="https://manuelmoreale.com/a-rant-on-web-font-licenses">A rant on web font licenses</a>. I highly recommend you give it a read (it&#8217;s relatively short) since Manu makes a solid argument against existing font licenses. After reading, I found myself thinking about it throughout the rest of the day.</p>
<p>I was trying to understand how we ended up in a situation where web&#47;UI designers (myself included) have started to <em>insist</em> on using proprietary, custom web fonts. Do any users actively benefit from custom web fonts? Are there any <em>useful</em> and <em>measurable</em> goals achieved by including them? Do end-users actually <em>care</em> about a website&#8217;s typeface?</p>
<p>For the most part, I believe the answer to all those questions is: <strong>not really</strong>.</p>
<h2 id="system-fonts-look-good">System Fonts Look Good</h2>
<p>We are no longer in the early days of the internet. Browsers have matured. Operating systems already ship with usable and often times pretty typefaces. The &#8220;wow factor&#8221; of having a custom web font on a website is completely gone. Not to mention, recent trends see designers including <em>terrible</em> typefaces that actually make things more difficult to read and break basic accessibility.</p>
<p>All of this for the sake of a company&#8217;s &#8220;brand&#8221;. I say: <strong>fuck your brand</strong>. Your end-users should always trump your design &#8220;guidelines&#8221;. Period.</p>
<h2 id="think-of-the-consistency">&#8220;Think of the Consistency!&#8221;</h2>
<p>Often times designers will argue that designs will look too different across browsers&#47;operating systems. I&#8217;m not sure why this is seen as a bad thing. First, users will be familiar with the fonts already available to them. Second, as designers our work should never rely on one point of failure (in this instance: fonts). Your designs should be agnostic of your typeface selection. </p>
<p>And what about users with browser extensions that already block your custom web fonts? Screw them I guess?</p>
<p>People work on different systems with different constraints and settings. Embrace that - don&#8217;t try to override it.</p>
<h2 id="loss-of-personality">Loss of Personality</h2>
<p>The web is not the same medium as graphic design. Digital designers often get this confused. Web applications serve an action or purpose. The user wants to complete a <em>task</em> - not look at a pretty poster. I understand this sounds harsh, but many designers design more for their own ego and portfolio rather than the end-user. That extra <em>flair</em> on your lowercase &#8220;t&#8221; doesn&#8217;t help the user better interact with your features or UI. It just slows them down.</p>
<h2 id="hurting-performance-wasting-resources">Hurting Performance &#38; Wasting Resources</h2>
<p>A lot of designers I&#8217;ve worked with or talked to in the past tend to be big supporters of reducing their carbon footprint and minimizing their individual output of &#8220;waste&#8221;. What I always find interesting is how that never seems to translate into their work.</p>
<p>It might be small in the grand scheme of things, but having an extra HTTP request (or more) for your custom fonts and requiring your users to consume more bandwidth on their end is not &#8220;eco&#8221;. As designers we should cut the fat and reduce software bloat in the small areas that we&#8217;re able to: the front end.</p>
<p>My hope is that even one designer reading this decides to rollout a web app or marketing page without dumping a bunch of custom fonts on their users. It&#8217;s just the <em>nice</em> thing to do.</p>
<footer role="contentinfo">
    <h2>Menu Navigation</h2>
    <ul id="menu">
        <li><a href="/">Home</a></li>
        <li><a href="/projects">Projects</a></li>
        <li><a href="/uses">Uses</a></li>
        <li><a href="/wiki">Wiki</a></li>
        <li><a href="/resume">Resume</a></li>
        <li><a href="/colophon">Colophon</a></li>
        <li><a href="/now">Now</a></li>
        <li><a href="/donate">Donate</a></li>
        <li><a href="/atom.xml">RSS</a></li>
        <li><a href="#top">&uarr; Top of the page</a></li>
    </ul>
    <small>
        Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
        Maintained with ♥ for the web. <br>
        Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> &amp; <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
        The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
    </small>
</footer>