Skip to main content

Typography

Typography provides the core structure of a well-designed interface. Gatsby’s typography strives to create clear hierarchies, useful organizations, and purposeful alignments that guide the user through content, product, and experience.

Work in Progress

Font stack

Gatsby uses the all-time classic Futura for headlines and display copy. Long form text such as articles and documentation currently use the native font stack, but we are actively looking for a serif to increase the reading experience.

Futura PT

The native font stack

The “native font stack” depends on the user’s operating system and device; depending on that, we use San Francisco UI, Roboto or Segoe UI.

Our monospace font stack also makes use of the default fonts available: That’s usually San Francisco Mono, Menlo or Monaco on Mac OS X, Consolas on Windows, or Liberation Sans on Linux distributions.

In our (Figma, Sketch, etc.) designs we use Roboto as it’s easily available.

Sans-serif
Monospace

Scale

Since our primary use for the design system is interface design, our typographic scale is hand-crafted. This way we don’t have to worry about decimals in our design tools or when calculating line heights, don’t have to worry about subpixel rounding errors, and have total control over which sizes exist instead of outsourcing that job to a mathematical formula.

For long form content like articles, using a modular scale is totally fine though. Typography.js makes setting up and using such a scale easy.

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
12   0.75rem   fontSizes[0]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
14   0.875rem   fontSizes[1]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
16   1rem   fontSizes[2]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
18   1.125rem   fontSizes[3]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
20   1.25rem   fontSizes[4]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
24   1.5rem   fontSizes[5]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
28   1.75rem   fontSizes[6]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
32   2rem   fontSizes[7]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
36   2.25rem   fontSizes[8]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
42   2.625rem   fontSizes[9]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
48   3rem   fontSizes[10]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
54   3.375rem   fontSizes[11]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
60   3.75rem   fontSizes[12]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
68   4.25rem   fontSizes[13]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
76   4.75rem   fontSizes[14]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
84   5.25rem   fontSizes[15]
Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that's no matter—tomorrow we will run faster, stretch out our arms farther… And one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.
92   5.75rem   fontSizes[16]

Weights, letter spacings and line heights

A note on Futura PT Bold: While Futura PT Bold works well at display size, it gets hard to read below ~30px. For screens, use it for the page title (once per page). Do not use it for "bold" text—that is the job of Futura PT Demi.

Font Weights

800
fontWeights.extraBold

Use this for the main headline, set in Futura PT Bold, only.

700
fontWeights.bold — bold

Use this for the all headlines but the main page title, and to emphasize text throughout regular copy.

400
fontWeights.body — normal

Letter Spacing

Letterspacing (also known as character spacing or tracking) is the adjustment of the horizontal white space between the letters in a block of text. Tokens are intended for use with the letter-spacing CSS property.

Normal — letterSpacings.normal — normal

Use for almost everything.

Tight — letterSpacings.tight — -0.015em

Use for headlines set in Futura PT.

Create digital experiences on the edge—faster

Tracked — letterSpacings.tracked — 0.075em

Use for small caps, particularly at small sizes — when using capital letters together, the default spacing looks too tight.

greglobinski

Line Heights

Default — lineHeights.default — 1.5

It eluded us then, but that’s no matter—tomorrow we will run faster, stretch out our arms farther. . . . And then one fine morning— So we beat on, boats against the current, borne back ceaselessly into the past.

Solid — lineHeights.solid — 1

Scale to the entire internet

Dense — lineHeights.dense — 1.25

Stop managing content.
Start telling your story.

Loose — lineHeights.loose — 1.75

As a popular and growing framework for building websites and web applications, Gatsby is in a position to make an impact for accessibility and people with disabilities. The Gatsby team is passionate about helping you create websites that work for everyone, with helpful defaults that bake in web accessibility as well as performance optimizations.

Sample hierarchies

A couple of usage examples — currently, these are rough PoC-style styled-system remodels of components used on our website. Ideally, this section will be built using these "live" components.

The Future is Fast

Create digital experiences on the edge—faster

Gatsby provides a modern framework for turning content into feature-rich, visually engaging apps and websites.

Over the last few years, the modern JavaScript ecosystem has created tools that allow developers to build quicker with fewer bugs. Gatsby gives you easy access to features like modern JavaScript syntax, code bundling and hot reloading, without having to maintain custom tooling. Build app-like experiences faster — with Gatsby.

Websites come in a thousand different flavors. Timeframes, budgets, interactivity requirements and content systems can vary wildly from one project to the next.

This variety puts website teams between a rock and a hard place. They often have to maintain frontends built in multiple development systems, stretching their developers’ skill sets. Implementing the same dropdown in five different frameworks can be a huge headache. But what’s the alternative — turn down good client projects?

To add to the difficulty, when your UI development framework is coupled to your client’s CMS backend, it doesn’t just cause technical problems; it causes people problems. It makes your team’s staffing plans dependent on specific projects. It hamstrings your ability to respond to changing client requirements by shifting resources around.

Simple landing page

Stop managing content.
Start telling your story.

Gatsby brings your content to the edge for lightning fast, safe website delivery with no CMS overhead.

14 day free trial — no credit card required

Modern web tech without the headache

Enjoy the power of the latest web technologies – React.js , Webpack , modern JavaScript and CSS and more — all set up and waiting for you to start building.

Bring your own data

Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — pull data from headless CMSs, SaaS services, APIs, databases, your file system, and more.

Future-proof your website

Do not build a website with last decade’s tech. The future of the web is mobile, JavaScript and APIs—the JAMstack. Every website is a web app and every web app is a website. Gatsby.js is the universal JavaScript framework you’ve been waiting for.

Scale to the entire internet

Forget complicated deploys with databases and servers and their expensive, time-consuming setup costs, maintenance, and scaling fears — Gatsby builds your site as “static” files which can be deployed easily on various services.

Speed past the competition

Gatsby.js builds the fastest possible website. Instead of waiting to generate pages when requested, pre-build pages and lift them into a global cloud of servers — ready to be delivered instantly to your users wherever they are.

Static Progressive Web Apps

Gatsby.js is a static PWA (Progressive Web App) generator. You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.
Cards
greglobinski/
167

gatsby-starter-personal-blog

A Gatsby starter for a personal blog
Updated 3 days ago

Using decoupled Drupal with Gatsby with Kyle Mathews

Shannon Soper on August 13th 2018
Why use Drupal + Gatsby together? Kyle Mathews is presenting on “Gatsby + Drupal” at Decoupled Drupal Days NYC this Saturday; for those who can’t make it to his presentation, we wanted to give you a sneak peek of what it will be about.
Read more
Long-form text (with sidebar on large screens)

Documentation

  • Introduction
  • Quickstart
  • Recipes

Guides

  • Preparing your environment
  • Deploying & hosting
  • Custom configuration
  • Images and files
  • Sourcing content and data
  • Querying your data with GraphQl
  • Plugins
  • Starters
  • Styling your site
  • Adding testing
  • Debugging Gatsby
  • Adding website functionality
  • Improving performance
  • Localizing your site

How we're migrating a government open data site to Gatsby

React Hooks are cool. Besides simplifying your code and removing the need for a lot of boilerplate associated with classes in JavaScript (looking at you, this), they enable some serious shareability. They also make it possible to use state in functional components.

You can probably tell that we’ve been super excited about React Hooks. So when they finally landed in React 16.8, we figured it was time to give our very own StaticQuery component the hook treatment!

Baking PWAs, React and GraphQL into a web framework

One of Gatsby’s goals is to provider users all the benefits of modern web out of the box, from implementing a Progressive Web App (PWA) checklist of features, React, accessibility by default, CSS-in-JS support, headless CMSs, and GraphQL.

No more Render Props necessary to use a Static Query

This simplifies accessing data in your components and also keeps your component tree shallow.

Let’s quickly check out a basic example. Here’s a typical Header component, first written using StaticQuery and then useStaticQuery.

💡 For a great introduction to using the command line, check out Codecademy’s Command Line tutorial for Mac and Linux users, and this tutorial for Windows users. Even if you are a Windows user, the first page of the Codecademy tutorial is a valuable read.
Docs
Tutorials
Plugins
Blog
Showcase