Identify families, weights, and styles used, the last of which almost always refers to just normal and italics. This is already apparent from the current Style Guide, but to give a window into my process, my first step when starting to structure typography elements is to “check out” all families and weights/styles used to make them available in the editor.
Weights used here are dev-specific units (numbered). XD uses words, which is fine to keep doing. I always just translate them into the numeric approach, which is how they need to be coded into theme.json. See a chart outlining this translation if you’re curious, but I request no change to your practice.
Abhaya Libre
Weight(s)
400
Style(s)
Normal
Open Sans
Weight(s)
600
Style(s)
Normal, Italic
Lato
Weight(s)
100, 300, 400, 700, 900
Style(s)
Normal, Italic
It is important to remember that there is a symbiotic relationship between the desktop version of the website and the mobile version. All developed elements must scale and/or stack. When this comes to font attributes, it is key to pair desktop with mobile, as they’re assigned to a single style, which dynamically (and usually, fluidly) scale down. They’re defined together.
Additionally, HTML only provides a few distinct element types — paragraph (p), heading (h1-h6), list (ul/ol), and blockquote. Gutenberg does not differentiate base styles between unordered lists (such as bulleted) and ordered lists (such as numeric, which I know we hardly use anyway) when it comes to typography.
My process is to create the singular, most generic version (or most commonly used) of each element as a base, and then modify to build the anomalies from that starting point.
There is no need to outline fonts and sizes in tables as I have, and this is to just illustrate how important it is to (a) always group desktop and mobile together, and (b) to itemize and outline all anomalies, and for both desktop and mobile. The Style Guide should be element-focused (pairing desktop/mobile together), not focused on categorizing elements/anomalies into two separate groups for desktop and mobile.
See the bottom of this page for additional thoughts on how we can work together to improve in this area, as it will be a team effort.
paragraph (body copy)
Family/Weight
Lato/300
font-size
XX
line-height
XX
letter-spacing
XX
| Paragraph (P) | Lato/300 | 19/16 | 34/30 | 0.95/0.8 |
|---|---|---|---|---|
| Link/Button (P/A) * | Lato/400/Uppercase | 16 | 28 | 0.8 |
| Leadership/Location Name (P) | Lato/700/Uppercase | 19 | 24 | 1.9 |
| Leader Pos/Loc Address (P) | Lato/400/Uppercase | 16 | 20 | 0.8 |
| Senior Fellow Name (P) | Lato/400/Uppercase | 30/24 | 34/30 | 3/2.4 |
| Senior Fellow Pos (P) | Lato/400/Uppercase | 18 | 20 | 0.9 |
| Footer Info (P) ** | Lato/700/Uppercase | 12/14 | 20/20 | 1.2/1.4 |
| Menu Body Copy (P) | Lato/300 | 17/NA | 24/NA | 0.85/NA |
| Menu Styles (All) (P) *** | Misc | Misc | Misc | Misc |
| Hero Copy (P) *** | Lato/400 | 24/20 | 34/24 | 1.2/1 |
| Homepage Hero Copy (P) ** | Lato/400 | 26/18 | 36/26 | 1.3/0.9 |
| Footer Pastel Page List (P) *** | Open Sans/600/Uppercase | 14 | 28 | 1.4 |
| Homepage Treatment Links (P) *** | Abhaya Libre/400 | 36/28 | 55/55 | 1.08/0.84 |
| Homepage 9.3 (P) *** | Lato/400 | 70/50 | 84/60 | 2.1/1.5 |
| Homepage 9.3/10 (P) *** | Lato/400/Uppercase | 26/18 | 32/24 | 0.78/0.54 |
| Director Name (P) *** | Lato/400/Uppercase | 28/26 | 34/30 | 2.6/2.6 |
| Director Title (P) *** | Lato/400/Uppercase | 21/18 | 28 | 2.1/1.8 |
Family/Weight
Abhaya Libre/400
font-size
XX
line-height
XX
letter-spacing
XX
| Heading 1 (H1) | Abhaya Libre/400 | 60/50 | 45/45 | 1.8/1.5 |
|---|---|---|---|---|
| Homepage Hero (H1) ** | Abhaya Libre/400 | 75/48 | 45/40 | 2.25/1.44 |
| Senior Fellow Bio (H1) | Lato/400/Uppercase | 32 | 34 | 3.2 |
| News Single (H1) *** | Abhaya Libre/400 | 40 | 40 | 1.2 |
Family/Weight
Abhaya Libre/400
font-size
XX
line-height
XX
letter-spacing
XX
| Heading 2 (H2) | Abhaya Libre/400 | 60/40 | 48/40 | 1.2 |
|---|---|---|---|---|
| No anomalies. 👍 | — | — | — | — |
Family/Weight
Lato/400
font-size
XX
line-height
XX
letter-spacing
XX
| Heading 3 (H3) | Lato/400/Uppercase | 26/20 | 34/24 | 2.6/2 |
|---|---|---|---|---|
| Three-Column Items (H3) *** | Lato/400/Uppercase | 22/20 | 34/24 | 2.2/2 |
Regular H3 used on What We Offer (Alumni), but anomaly listed is used on A Model for Recovery (The Meadows Model), What We Treat (What We Treat), and Therapies (Types of Therapy).
Family/Weight
Lato/400
font-size
XX
line-height
XX
letter-spacing
XX
| List (UL/OL) | Lato/400/Uppercase | 20/16 | 32/30 | 1/0.8 |
|---|---|---|---|---|
| List No Bullets (UL) | Lato/400 | 19/16 | 28/30 | 0.95/0.8 |
The two above list styles were what was outlined in the Style Guide, but the predominant list style I saw throughout the site was a bulleted list that used the List No Bullets style. Since the two styles above are one degree removed apiece (bullets but different size and casing, same size and case but no bullets, respectively), that predominant one should’ve been in the Style Guide as the base style for Lists, with these two being the anomalies from it.
Additionally, a couple lists are using base style from the Style Guide, but are just not uppercase.
Block Quote
Family/Weight
Abhaya Libre/400
font-size
XX
line-height
XX
letter-spacing
XX
| Pull Quote (BLOCKQUOTE) | Abhaya Libre/400 | 30/24 | 40/34 | 0.9/0.72 |
|---|---|---|---|---|
| No anomalies. 👍 | — | — | — | — |
No styles were incorrect or omitted, but preferably the starting point for a quote, which takes a few different forms throughout the site (quote with attribution, fancy quote with attribution, statistic with attribution, plain pull quote) would be one of the fuller ones with attribution to ensure those styles are always captured in the Style Guide.
Ultimately, however, those attribution styles matched other name/title styles used on Leadership/Senior Fellows/Locations, so this was a-okay.
Assume a single or omitted value means the value doesn’t change desktop-to-mobile.
* — It’s fine because I prefer we treat buttons as their own thing anyway, but this listed letter-spacing did not apply to all buttons types (one instance)
** — For all anomalies, please outline both desktop and mobile styles in the Style Guide, unless there is no change (such as with Senior Fellows Bio H1) (three instances)
*** — We must identify all anomalies. (10 instances)