---
name: Alegreya Sans
date_added: 2018-10-15
category: Sans-Serif
styles: 14
italic: true
smallcap: true
weights: [{ weight: 100, name: 'Thin' },
          { weight: 300, name: 'Light' },
          { weight: 400, name: 'Regular' },
          { weight: 500, name: 'Medium' },
          { weight: 700, name: 'Bold' },
          { weight: 800, name: 'Extra-Bold' },
          { weight: 900, name: 'Black' }]
latest_release: { version: 'v2.008', date: '13 Mar 2018' }
project_url: https://github.com/huertatipografica/Alegreya-Sans
g_fonts_url: https://fonts.google.com/specimen/Alegreya+Sans
creator: { name: 'Huerta Tipográfica', url: 'https://huertatipografica.com/en' }
description: Alegreya Sans is the companion to Alegreya, with both typefaces taking inspiration from calligraphic letter forms. Offering seven weights, along with an expressive italic and small cap, it works well in a variety of contexts, from long-form texts to headlines.
family_faces: [Alegreya]
comparison_faces: [Alegreya, FiraGO, IBM Plex Sans, Inria Sans]
---

<div class='type-detail-table gr4 gc6'>
  <div class='meta dark top'>
    <p class='name'>Standard Ligatures</p>
    <p class='code'>font-feature-settings: 'liga', 'clig';</p>
  </div>
  <div class='examples flow-row'>
    <div><span class='fade'>fb</span> <span class='liga'>fb</span></div>
    <div><span class='fade italic'>fb</span> <span class='liga'><em>fb</em></span></div>
    <div><span class='fade'>ff</span> <span class='liga'>ff</span></div>
    <div><span class='fade italic'>ff</span> <span class='liga italic'>ff</span></div>
    <div><span class='fade'>ffi</span> <span class='liga'>ffi</span></div>
    <div><span class='fade italic'>ffi</span> <span class='liga italic'>ffi</span></div>
    <div><span class='fade'>ffj</span> <span class='liga'>ffj</span></div>
    <div><span class='fade italic'>ffj</span> <span class='liga italic'>ffj</span></div>
    <div><span class='fade'>ffl</span> <span class='liga'>ffl</span></div>
    <div><span class='fade italic'>ffl</span> <span class='liga italic'>ffl</span></div>
    <div><span class='fade'>fft</span> <span class='liga'>fft</span></div>
    <div><span class='fade italic'>fft</span> <span class='liga italic'>fft</span></div>
    <div><span class='fade'>fh</span> <span class='liga'>fh</span></div>
    <div><span class='fade italic'>fh</span> <span class='liga italic'>fh</span></div>
    <div><span class='fade'>fi</span> <span class='liga'>fi</span></div>
    <div><span class='fade italic'>fi</span> <span class='liga italic'>fi</span></div>
    <div><span class='fade'>fj</span> <span class='liga'>fj</span></div>
    <div><span class='fade italic'>fj</span> <span class='liga italic'>fj</span></div>
    <div><span class='fade'>fk</span> <span class='liga'>fk</span></div>
    <div><span class='fade italic'>fk</span> <span class='liga italic'>fk</span></div>
    <div><span class='fade'>fl</span> <span class='liga'>fl</span></div>
    <div><span class='fade italic'>fl</span> <span class='liga italic'>fl</span></div>
    <div><span class='fade'>ft</span> <span class='liga'>ft</span></div>
    <div><span class='fade italic'>ft</span> <span class='liga italic'>ft</span></div>
  </div>
</div>

<div class='type-detail-table examples-figures gr6 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='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 gr3 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'>1st</span> <span class='ordinals'>1st</span></div>
    <div><span class='fade'>2nd</span> <span class='ordinals'>2nd</span></div>
    <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><span class='fade'>No.</span> <span class='ordinals'>No.</span></div>
  </div>
</div>

<div class='type-detail-table gr4 gc6'>
  <div class='meta dark top'>
    <p class='name'>Alternate Glyph Forms</p>
    <p class='code'>font-feature-settings: 'ss01';</p>
  </div>
  <div class='examples flow-row'>
    <div><span class='fade'>XVLIII</span> <span class='ss01'>XVLIII</span></div>
    <div><span class='fade'>MDC</span> <span class='ss01'>MDC</span></div>
    <div><span class='fade'>mxlii</span> <span class='ss01'>mxlii</span></div>
    <div><span class='fade'>dxxvii</span> <span class='ss01'>dxxvii</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>&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>&#9650;</span> <p class='code'>&amp;#9650;</p></div>
    <div><span>&#9654;</span> <p class='code'>&amp;#9654;</p></div>
    <div><span>&#9660;</span> <p class='code'>&amp;#9660;</p></div>
    <div><span>&#9664;</span> <p class='code'>&amp;#9664;</p></div>
    <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>
</div>