---
name: Alegreya
date_added: 2018-10-15
category: Serif
styles: 10
italic: true
smallcap: true
weights: [{ 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: '30 Oct 2018' }
project_url: https://github.com/huertatipografica/Alegreya
g_fonts_url: https://fonts.google.com/specimen/Alegreya
creator: { name: 'Huerta Tipográfica', url: 'https://huertatipografica.com/en' }
description: Alegreya is a contemporary interpretation of a calligraphic face, designed for long-form literary texts. It offers five weights, a carefully designed italic, small caps, and good OpenType support. This rich typographic palette makes it a versatile and expressive typeface.
family_faces: [Alegreya Sans]
comparison_faces: [Alegreya Sans, IBM Plex Serif, Source Serif Pro, Vollkorn]
---

<div class='type-detail-table gr4 gc6'>
  <div class='meta dark top flex-column'>
    <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'>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'>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'>ft</span> <span class='liga'>ft</span></div>
    <div><span class='fade'>Th</span> <span class='liga'>Th</span></div>
    <div><span class='fade italic'>Th</span> <span class='liga italic'>Th</span></div>
  </div>
</div>

<div class='type-detail-table gr3 gc6'>
  <div class='meta dark top flex-column'>
    <p class='name'>Discretionary Ligatures</p>
    <p class='code'>font-feature-settings: 'dlig';</p>
  </div>
  <div class='examples flow-row'>
    <div><span class='fade'>ch</span> <span class='dlig'>ch</span></div>
    <div><span class='fade'><em>ch</em></span> <span class='dlig italic'>ch</span></div>
    <div><span class='fade'>ct</span> <span class='dlig'>ct</span></div>
    <div><span class='fade italic'>ct</span> <span class='dlig italic'>ct</span></div>
    <div><span class='fade'>st</span> <span class='dlig'>st</span></div>
    <div><span class='fade italic'>st</span> <span class='dlig italic'>st</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='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 flex-column'>
    <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 gr3 gc6'>
  <div class='meta dark top flex-column'>
    <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>