---
name: Fraunces
date_added: 2020-11-22
category: Display
styles: Variable
italic: true
weights: [{ weight: 100, name: 'Thin' },
          { weight: 200, name: 'Extra-Light' },
          { weight: 300, name: 'Light' },
          { weight: 400, name: 'Regular' },
          { weight: 500, name: 'Medium' },
          { weight: 600, name: 'Semi Bold' },
          { weight: 700, name: 'Bold' },
          { weight: 800, name: 'Extra-Bold' },
          { weight: 900, name: 'Black' }]
latest_release: { version: 'v1.0', date: '29 Oct 2020' }
project_url: https://github.com/undercasetype/Fraunces
creator: { name: 'Undercase Type', url: 'http://www.undercase.xyz' }
description: "Fraunces is a display face inspired by 20th century faces such as Windsor and Cooper. It’s available as a variable font, making use of several custom axes: ‘SOFT’ and ‘WONK’, along with the registered axes ‘wght’ and ‘opsz’."
comparison_faces: [Playfair Display]
---

<div class='type-detail-table gr3 gc6'>
  <div class='meta dark top'>
    <p class='name'>Wonk</p>
    <p class='code'>font-variation-settings: 'WONK';</p>
  </div>
  <div class='examples flow-row'>
    <div><span style='font-variation-settings: "WONK" 0;'>mnhs&</span> <p class='code'>'WONK' 0</p></div>
    <div><span style='font-variation-settings: "WONK" 1;'>mnhs&</span> <p class='code'>'WONK' 1</p></div>

    <div><span class='italic' style='font-variation-settings: "WONK" 0;'>lbdhkvw&</span> <p class='code'>'WONK' 0</p></div>
    <div><span class='italic' style='font-variation-settings: "WONK" 1;'>lbdhkvw&</span> <p class='code'>'WONK' 1</p></div>
  </div>
</div>

<div class='type-detail-table gr3 gc6'>
  <div class='meta dark top'>
    <p class='name'>Softness</p>
    <p class='code'>font-variation-settings: 'SOFT';</p>
  </div>
  <div class='examples flow-row'>
    <div><span style='font-variation-settings: "SOFT" 0;'>Softness</span> <p class='code'>'SOFT' 0</p></div>
    <div><span style='font-variation-settings: "SOFT" 50;'>Softness</span> <p class='code'>'SOFT' 50</p></div>
    <div><span style='font-variation-settings: "SOFT" 100;'>Softness</span> <p class='code'>'SOFT' 100</p></div>

    <div><span class='italic' style='font-variation-settings: "SOFT" 0;'>Softness</span> <p class='code'>'SOFT' 0</p></div>
    <div><span class='italic' style='font-variation-settings: "SOFT" 50;'>Softness</span> <p class='code'>'SOFT' 50</p></div>
    <div><span class='italic' style='font-variation-settings: "SOFT" 100;'>Softness</span> <p class='code'>'SOFT' 100</p></div>
  </div>
</div>

<div class='type-detail-table gr3 gc6'>
  <div class='meta dark top'>
    <p class='name'>Optical Size</p>
    <p class='code'>font-variation-settings: 'opsz';</p>
  </div>
  <div class='examples flow-row'>
    <div><span style='font-variation-settings: "opsz" 9;'>Optical</span> <p class='code'>'opsz' 9</p></div>
    <div><span style='font-variation-settings: "opsz" 68;'>Optical</span> <p class='code'>'opsz' 68</p></div>
    <div><span style='font-variation-settings: "opsz" 144;'>Optical</span> <p class='code'>'opsz' 144</p></div>

    <div><span class='italic' style='font-variation-settings: "opsz" 9;'>Optical</span> <p class='code'>'opsz' 9</p></div>
    <div><span class='italic' style='font-variation-settings: "opsz" 68;'>Optical</span> <p class='code'>'opsz' 68</p></div>
    <div><span class='italic' style='font-variation-settings: "opsz" 144;'>Optical</span> <p class='code'>'opsz' 144</p></div>
  </div>
</div>

<div class='type-detail-table gr3 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>&#188;</span> <p class='code'>&amp;188;</p></div>
    <div><span>&#189;</span> <p class='code'>&amp;189;</p></div>
    <div><span>&#190;</span> <p class='code'>&amp;190;</p></div>
  </div>
</div>