Typography · Hydrogen

The type scale #

Based on your theme's typography settings, Hydrogen builds a custom type scale that contains automated, incremental typography styles.

Hydrogen uses both the type_scale and line_heights values to assign copy, heading, and caption font sizes and accompanying line heights that will automatically adapt to their respective media query_key.

Configuring the scale #

As described in the typography theme configuration section, Hydrogen's typography system is configured using 4 key values:

query_key: is the key value that defines a particular media query. This value tells Hydrogen when to apply this specific set of typography styles.
size: determines the base value for your paragraph body copy. It's recommended that you use a percentage value for this setting to avoid unexpected accessibility limitations. 100% will equal the user's current browser value (often 16px by default).
type_scale: is the ratio at which headings should be increased in size from your base paragraph. If you're unsure what value to set, you can use the type scale website to find one that suits your needs.
line_heights accepts optional configurations for each of the type scale's units, the most important of which is body, whose value is used to determine how Hydrogen calculates whitespace multipliers. body will default to a value of 1.4 if you don't specify a custom value.

hydrogen.config.json

"typography": [
  {
    "query_key": "base",
    "size": "100%",
    "type_scale": "1.15"
    "line_heights": {
      "caption": "1.5",
      "body": "1.4",
      "h6": "1.1",
      "h5": "1.1",
      "h4": "1.1",
      "h3": "1.1",
      "h2": "1.1",
      "h1": "1.1",
      "display": "1.1"
    }
  },
  ...
],

Using scale values #

Based on the configuration, Hydrogen then creates a series of values that can be used in the data-h2-font-size attribute:

display: the largest font size, used for display elements like hero text.
h1, h2, h3, h4, h5, h6: heading font sizes that increase in size based on the scale, with level 6 being the smallest and level 1 being the largest.
copy: the base font size, applied to all standard elements.
caption: the smallest font size, used for contextual copy and image captions, among other things.

If include_reset_css is enabled in your configuration, standard elements will be automatically set to their Hydrogen value counterpart. For example, heading elements will be given their relevant heading scale value and calculated line height.

index.html

<span data-h2-font-size="base(h1)">
  This would be heading 1 sized.
</span>

<span data-h2-font-size="base(body)">
  This would be paragraph sized.
</span>

<span data-h2-font-size="base(display)">
  This would be extra-large display text sized.
</span>

<
 
<
undefined
<
 
<
undefined
<
 
<

Type and vertical rhythm #

The next page, Layout, goes into detail about how Hydrogen provides you with handy, consistent whitespace units. It's important to note, however, that these values have their root in your typography settings.

These space units are generated and adapt based on your configured body line height, allowing you to set typography in a consistent vertical rhythm. These units use a common syntax inside of attributes: x1, x2, etc. These multipliers set space between elements in a way that echoes your content, creating a pleasant reading experience for your user.

index.html

<div data-h2-height="base(x2)"></div>

<div data-h2-padding-top="base(x1.5)"></div>

<div data-h2-gap="base(x3)"></div>

<
undefined
<
undefined
<