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.
Gatsby uses the all-time classic Futura for it’s headlines and display copy. Long form text such as articles and documentation can also (currently 😛) be set in Spectral.
All other copy relies on the “native font stack”: Depending on the user’s operating system and device, we use San Francisco UI, Roboto or Segoe UI. In our Figma designs we use Roboto as it’s easily available.
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.
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.
A couple of usage examples lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
While Futura 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.
The Future is Fast
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.
Gatsby brings your content to the edge for lightning fast, safe website delivery with no CMS overhead.
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!
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.