---
name: Work Sans
date_added: 2018-11-26
category: Sans-Serif
styles: Variable
italic: true
smallcap: true
weights: [{ weight: 100, name: 'Thin' },
          { weight: 200, name: 'ExtraLight' },
          { weight: 300, name: 'Light' },
          { weight: 400, name: 'Regular' },
          { weight: 500, name: 'Medium' },
          { weight: 600, name: 'SemiBold' },
          { weight: 700, name: 'Bold' },
          { weight: 800, name: 'ExtraBold' },
          { weight: 900, name: 'Black' }]
latest_release: { version: 'v?', date: '1 May 2020' }
project_url: https://github.com/weiweihuanghuang/Work-Sans
g_fonts_url: https://fonts.google.com/specimen/Work+Sans
creator: { name: 'Wei Huang', url: 'https://twitter.com/w__h_' }
description: "Work Sans is a sans-serif inspired by early Grotesque faces. It recently received a major update, adding an italic style and a wide selection of OpenType features. The face has a slightly playful feel, especially at heavier weights."
comparison_faces: [Archivo, Cooper Hewitt, Poppins, Source Sans Pro]
---

<div class='type-detail-table gr3 gc6'>
  <div class='meta dark top'>
    <p class='name'>Discretionary Ligatures</p>
    <p class='code'>font-feature-settings: 'dlig';</p>
  </div>
  <div class='examples flow-row'>
    <div><span class='fade'>ct</span> <span class='dlig'>ct</span></div>
    <div><span class='fade'>st</span> <span class='dlig'>st</span></div>
    <div><span class='fade'>(1)</span> <span class='dlig'>(1)</span></div>
    <div><span class='fade'>(2)</span> <span class='dlig'>(2)</span></div>
    <div><span class='fade'>(3)</span> <span class='dlig'>(3)</span></div>
    <div><span class='fade'>(4)</span> <span class='dlig'>(4)</span></div>
    <div><span class='fade'>(5)</span> <span class='dlig'>(5)</span></div>
    <div><span class='fade'>(6)</span> <span class='dlig'>(6)</span></div>
    <div><span class='fade'>(7)</span> <span class='dlig'>(7)</span></div>
    <div><span class='fade'>(8)</span> <span class='dlig'>(8)</span></div>
    <div><span class='fade'>(9)</span> <span class='dlig'>(9)</span></div>
  </div>
</div>

<div class='type-detail-table gr2 gc6'>
  <div class='meta dark top'>
    <p class='name'>Titling Alternates</p>
    <p class='code'>font-feature-settings: 'titl';</p>
  </div>
  <div class='examples flow-row'>
    <div><span class='fade'>Ä</span> <span class='titl'>Ä</span></div>
    <div><span class='fade'>Ö</span> <span class='titl'>Ö</span></div>
    <div><span class='fade'>Ü</span> <span class='titl'>Ü</span></div>
  </div>
</div>

<div class='type-detail-table examples-figures gr8 gc6'>
  <div class='meta dark top'>
    <p class='name'>Figures</p>
  </div>
  <div class='examples flow-column flow-center'>
    <div>
      <h1 class='oldstyle-proportional'>1234567890</h1>
      <p class='character-label'>Proportional Oldstyle (default): 'pnum', 'onum'</p>
    </div>
    <div>
      <h1 class='oldstyle-tabular'>1234567890</h1>
      <p class='character-label'>Tabular Oldstyle: 'tnum', 'onum'</p>
    </div>
    <div>
      <h1 class='lining-proportional'>1234567890</h1>
      <p class='character-label'>Proportional Lining: 'pnum', 'lnum'</p>
    </div>
    <div>
      <h1 class='lining-tabular'>1234567890</h1>
      <p class='character-label'>Tabular Lining: 'tnum', 'lnum';</p>
    </div>
    <div>
      <h1 class='small-caps'>1234567890</h1>
      <p class='character-label'>Small Caps: 'smcp';</p>
    </div>
    <div>
      <h1><span class='fade'>0</span> <span class='zero'>0</span></h1>
      <p class='character-label'>Slashed Zero: 'zero'</p>
    </div>
    <div>
      <h1 class='fractions'>1/2 3/4 5/6 7/8 90/123</h1>
      <p class='character-label'>Fractions: 'frac';</p>
    </div>
    <div>
      <h1><span class='fade'>A</span><span class='subscript'>1234567890</span></h1>
      <p class='character-label'>Subscripts: 'subs'</p>
    </div>
    <div>
      <h1><span class='fade'>A</span><span class='superscript'>1234567890</span></h1>
      <p class='character-label'>Superscripts: 'sups'</p>
    </div>
  </div>
</div>

<div class='type-detail-table gr2 gc6'>
  <div class='meta dark top'>
    <p class='name'>Ordinals</p>
    <p class='code'>font-feature-settings: 'ordn';</p>
  </div>
  <div class='examples flow-row'>
    <div><span class='fade'>3a</span> <span class='ordinals'>3a</span></div>
    <div><span class='fade'>4o</span> <span class='ordinals'>4o</span></div>
    <div><span class='fade'>No.</span> <span class='ordinals'>No.</span></div>
  </div>
</div>

<div class='type-detail-table gr2 gc6'>
  <div class='meta dark top'>
    <p class='name'>Contextual Swashes</p>
    <p class='code'>font-feature-settings: 'cswh';</p>
  </div>
  <div class='examples flow-row'>
    <div><span class='fade'>AR</span> <span class='cswh'>AR</span></div>
    <div><span class='fade'>EL</span> <span class='cswh'>EL</span></div>
    <div><span class='fade'>FE</span> <span class='cswh'>FE</span></div>
    <div><span class='fade'>MN</span> <span class='cswh'>MN</span></div>
    <div><span class='fade'>S</span> <span class='cswh'>S</span></div>
    <div><span class='fade'>T</span> <span class='cswh'>T</span></div>
    <div><span class='fade'>W</span> <span class='cswh'>W</span></div>
    <div><span class='fade'>n</span> <span class='cswh'>n</span></div>
    <div><span class='fade'>r</span> <span class='cswh'>r</span></div>
    <div><span class='fade'>t</span> <span class='cswh'>t</span></div>
    <div><span class='fade'>y</span> <span class='cswh'>y</span></div>
  </div>
</div>

<div class='type-detail-table gr2 gc6'>
  <div class='meta dark top'>
    <p class='name'>Alternate Glyph Forms</p>
    <p class='code'>font-feature-settings: 'ss--';</p>
  </div>
  <div class='examples flow-row'>
    <div><span class='fade'>G</span> <span class='ss04'>G</span> <p class='code'>'ss06'</p></div>
    <div><span class='fade'>R</span> <span class='ss03'>R</span> <p class='code'>'ss01'</p></div>
    <div><span class='fade'>a</span> <span class='ss06'>a</span> <p class='code'>'ss06'</p></div>
    <div><span class='fade'>g</span> <span class='ss01'>g</span> <p class='code'>'ss01'</p></div>
    <div><span class='fade'>l</span> <span class='ss02'>l</span> <p class='code'>'ss02'</p></div>
  </div>
</div>

<div class='type-detail-table gr3 gc6'>
  <div class='meta dark top'>
    <p class='name'>Case Sensitive Forms</p>
    <p class='code'>font-feature-settings: 'case';</p>
  </div>
  <div class='examples flow-row'>
    <div><span class='fade'>(A)</span> <span class='case'>(A)</span></div>
    <div><span class='fade'>{A}</span> <span class='case'>{A}</span></div>
    <div><span class='fade'>[A]</span> <span class='case'>[A]</span></div>
    <div><span class='fade'>-</span> <span class='case'>-</span></div>
    <div><span class='fade'>&ndash;</span> <span class='case'>&ndash;</span></div>
    <div><span class='fade'>&mdash;</span> <span class='case'>&mdash;</span></div>
    <div><span class='fade'>@</span> <span class='case'>@</span></div>
    <div><span class='fade'>¿</span> <span class='case'>¿</span></div>
  </div>
</div>

<div class='type-detail-table gr4 gc6'>
  <div class='meta dark top flex-row'>
    <p class='name'>Special Characters</p> <a href='glyphs/' class='glyph-explorer'>Explore all characters</a>
  </div>
  <div class='examples flow-row'>
    <div><span>&para;</span> <p class='code'>&amp;para;</p></div>
    <div><span>&sect;</span> <p class='code'>&amp;sect;</p></div>
    <div><span>&dagger;</span> <p class='code'>&amp;dagger;</p></div>
    <div><span>&Dagger;</span> <p class='code'>&amp;Dagger;</p></div>
    <div><span>&uarr;</span> <p class='code'>&amp;uarr;</p></div>
    <div><span>&nearr;</span> <p class='code'>&amp;nearr;</p></div>
    <div><span>&rarr;</span> <p class='code'>&amp;rarr;</p></div>
    <div><span>&searr;</span> <p class='code'>&amp;searr;</p></div>
    <div><span>&darr;</span> <p class='code'>&amp;darr;</p></div>
    <div><span>&swarr;</span> <p class='code'>&amp;swarr;</p></div>
    <div><span>&larr;</span> <p class='code'>&amp;larr;</p></div>
    <div><span>&nwarr;</span> <p class='code'>&amp;nwarr;</p></div>
    <div><span>&harr;</span> <p class='code'>&amp;harr;</p></div>
    <div><span>&updownarrow;</span> <p class='code'>&amp;updownarrow;</p></div>
    <div><span>&hookleftarrow;</span> <p class='code'>&amp;hookleftarrow;</p></div>
    <div><span>&hookrightarrow;</span> <p class='code'>&amp;hookrightarrow;</p></div>
    <div><span>&circlearrowleft;</span> <p class='code'>&amp;circlearrowleft;</p></div>
    <div><span>&circlearrowright;</span> <p class='code'>&amp;circlearrowright;</p></div>
  </div>
</div>