<story><title>System Font Stack</title><url>https://systemfontstack.com</url></story><parent_chain><item><author>swyx</author><text>I collect these things for fun and one of my big discoveries is that there&amp;#x27;s no &amp;quot;standard&amp;quot; system font stacks - here are my list of system font stacks and their sources: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;sw-yx&amp;#x2F;spark-joy&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;README.md#fonts&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;sw-yx&amp;#x2F;spark-joy&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;README.md#fon...&lt;/a&gt;&lt;p&gt;some of them even come with annotations as to why they make the choices they make.&lt;p&gt;Github&amp;#x27;s font stack is&lt;p&gt;font-family: -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Helvetica, Arial, sans-serif, &amp;quot;Apple Color Emoji&amp;quot;, &amp;quot;Noto Color Emoji&amp;quot;, &amp;quot;Segoe UI Emoji&amp;quot;, &amp;quot;Segoe UI Symbol&amp;quot;;&lt;p&gt;VS Code:&lt;p&gt;font-family: -apple-system, BlinkMacSystemFont, &amp;#x27;Segoe UI&amp;#x27;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;#x27;Open Sans&amp;#x27;, &amp;#x27;Helvetica Neue&amp;#x27;, sans-serif&lt;p&gt;probably more &amp;quot;native&amp;quot; on mobile:&lt;p&gt;font-family: -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, &amp;quot;Roboto&amp;quot;, &amp;quot;Oxygen&amp;quot;, &amp;quot;Ubuntu&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, Arial, sans-serif;&lt;p&gt;apparently all modern browsers have this new shortcut that make it as simple as:&lt;p&gt;font-family: ‘system-ui’, sans-serif;&lt;p&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;chromestatus.com&amp;#x2F;feature&amp;#x2F;5640395337760768&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;chromestatus.com&amp;#x2F;feature&amp;#x2F;5640395337760768&lt;/a&gt;</text></item></parent_chain><comment><author>divbzero</author><text>StackOverflow selected the following font stack [1] after holding an open discussion [2]. Note that their initial proposal included &lt;i&gt;system-ui&lt;/i&gt; which they later removed due to concerns about OS and language compatibility.&lt;p&gt;&lt;pre&gt;&lt;code&gt;  @ff-sans:
    -apple-system, BlinkMacSystemFont, &amp;#x2F;&amp;#x2F; San Francisco on macOS and iOS
    &amp;quot;Segoe UI&amp;quot;,                        &amp;#x2F;&amp;#x2F; Windows
    &amp;quot;Liberation Sans&amp;quot;,                 &amp;#x2F;&amp;#x2F; Linux
    sans-serif;                        &amp;#x2F;&amp;#x2F; The final fallback for rendering in sans-serif.
  @ff-serif: Georgia, Cambria, &amp;quot;Times New Roman&amp;quot;, Times, serif;
  @ff-mono:
    ui-monospace,                     &amp;#x2F;&amp;#x2F; San Francisco Mono on macOS and iOS
    &amp;quot;Cascadia Mono&amp;quot;, &amp;quot;Segoe UI Mono&amp;quot;, &amp;#x2F;&amp;#x2F; Newer Windows monospace fonts that are optionally installed. Most likely to be rendered in Consolas
    &amp;quot;Liberation Mono&amp;quot;,                &amp;#x2F;&amp;#x2F; Linux
    Menlo, Monaco, Consolas,          &amp;#x2F;&amp;#x2F; A few sensible system font choices
    monospace;                        &amp;#x2F;&amp;#x2F; The final fallback for rendering in monospace.
&lt;/code&gt;&lt;/pre&gt;
[1]: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;StackExchange&amp;#x2F;Stacks&amp;#x2F;pull&amp;#x2F;642&amp;#x2F;files&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;StackExchange&amp;#x2F;Stacks&amp;#x2F;pull&amp;#x2F;642&amp;#x2F;files&lt;/a&gt;&lt;p&gt;[2]: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;meta.stackexchange.com&amp;#x2F;questions&amp;#x2F;364048&amp;#x2F;we-are-switching-to-system-fonts-on-may-10-2021&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;meta.stackexchange.com&amp;#x2F;questions&amp;#x2F;364048&amp;#x2F;we-are-switc...&lt;/a&gt;</text></comment>
<story><title>System Font Stack</title><url>https://systemfontstack.com</url></story><parent_chain><item><author>swyx</author><text>I collect these things for fun and one of my big discoveries is that there&amp;#x27;s no &amp;quot;standard&amp;quot; system font stacks - here are my list of system font stacks and their sources: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;sw-yx&amp;#x2F;spark-joy&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;README.md#fonts&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;sw-yx&amp;#x2F;spark-joy&amp;#x2F;blob&amp;#x2F;master&amp;#x2F;README.md#fon...&lt;/a&gt;&lt;p&gt;some of them even come with annotations as to why they make the choices they make.&lt;p&gt;Github&amp;#x27;s font stack is&lt;p&gt;font-family: -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, Helvetica, Arial, sans-serif, &amp;quot;Apple Color Emoji&amp;quot;, &amp;quot;Noto Color Emoji&amp;quot;, &amp;quot;Segoe UI Emoji&amp;quot;, &amp;quot;Segoe UI Symbol&amp;quot;;&lt;p&gt;VS Code:&lt;p&gt;font-family: -apple-system, BlinkMacSystemFont, &amp;#x27;Segoe UI&amp;#x27;, Roboto, Oxygen, Ubuntu, Cantarell, &amp;#x27;Open Sans&amp;#x27;, &amp;#x27;Helvetica Neue&amp;#x27;, sans-serif&lt;p&gt;probably more &amp;quot;native&amp;quot; on mobile:&lt;p&gt;font-family: -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, &amp;quot;Roboto&amp;quot;, &amp;quot;Oxygen&amp;quot;, &amp;quot;Ubuntu&amp;quot;, &amp;quot;Helvetica Neue&amp;quot;, Arial, sans-serif;&lt;p&gt;apparently all modern browsers have this new shortcut that make it as simple as:&lt;p&gt;font-family: ‘system-ui’, sans-serif;&lt;p&gt;&lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;chromestatus.com&amp;#x2F;feature&amp;#x2F;5640395337760768&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;chromestatus.com&amp;#x2F;feature&amp;#x2F;5640395337760768&lt;/a&gt;</text></item></parent_chain><comment><author>kevincox</author><text>Why isn&amp;#x27;t `sans-serif` just the default sans-serif font? Why do we need a new keyword to get the actual default font?</text></comment>