index.html

---

layout: beatrice_page
home: true
share-image: a_texture.jpg
cards:
  - title: Designing with variable fonts
    description: Learn about the variable font format, how it works, and how to design with this flexible new technology
    url: /about-variable-fonts
    media: /assets/img/home-card-designing.svg
  - title: Implementing variable fonts
    description: Learn how to incorporate variable fonts into your project, either by using the Google Fonts platform or by hosting them yourself
    url: /implementing-variable-fonts
    media: /assets/img/home-card-implementing.svg
  - title: 'Variable font resources'
    url: /variable-font-resources
    description: Links to articles, videos, demos, and sources
    media: /assets/img/home-card-resources.svg
heroAxes:
  - label: Weight
    name: wght
    min: 100
    max: 1000
  - label: Casual
    name: CASL
    min: 0
    max: 1
    step: 0.01
  - label: Monospaced
    name: MONO
    min: 0
    max: 1
    step: 0.01
    default: 1
  - label: Slant
    name: slnt
    min: -15
    max: 0
    default: 0
---

<div class="mdc-top-app-bar--fixed-adjust js-top-app-bar--blur">
    {% include beatrice/02-molecules/10-hero-animation/hero-animation.html 
      text = 'Invariably Interesting'
      axes = page.heroAxes
    %}
    {% comment %}
      <p class="hero-more">Learn more about <a href="https://recursive.design" target="_blank" rel="noopener">Recursive</a>, a 5-axis variable font</p>   
    {% endcomment %}
</div>

<div class="content-section">
  <div class="home-grid">
    <div class="home-grid__title">
        <h2>Discover a revolution in<span class="widont">&nbsp;</span>type</h2>      
    </div>
    <div class="home-grid__intro">
        <p>Welcome to the most radical change in type since Gutenberg. Variable fonts let you add nuance and artistry to your web typography without bogging down your site. Now you can accomplish what used to require several files with a single file and some CSS!</p> 
        <p>The goal of this site is to show you how variable fonts tick. Discover how they can benefit <a href="{{ site.baseurl }}/about-this-site/#ui-design">user interface (UI) design</a>, <a href="{{ site.baseurl }}/about-this-site/#accessibility">accessibility</a>, and <a href="{{ site.baseurl }}/about-this-site/#reading">long-form reading</a>, and how they push the boundaries of skillful typographic expression on the web.</p>
    </div>
  </div>
</div>

<div class="content-section">
  <div class="card-grid card-grid--singlerow">
    {% for card in page.cards %}
      {% assign primary_link_url = site.baseurl | append: card.url %}
      <div class="card-grid-cell">
        {% include beatrice/02-molecules/03-card/card.html 
                   elevate=false
                   media=card.media
                   primary_link_url=primary_link_url
                   title =card.title
                   body=card.description %}
      </div>
    {% endfor %}
  </div>
</div>