Styles: Typography
Use typography styles across Plant Parents digital products to communicate clear and consistent information hierarchy, and ensure good readability for users.
Quick Summary
Font Colours: Always use the brand colour Cream for font on dark backgrounds, and
the brand colour Charcoal on light backgrounds.
Font Size Units: Always use rem units when setting font-size to provide responsive
text sizing.
Font Family: Use the following font-family: 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif.
Typography Styles: See detailed codepen examples for Positive Typography Styles
and Negative Typography Styles.
General Typography
Some general style rules exist which apply to typography when used across Plant Parents products, regardless of the type of element. These include guidelines for font colours, font families, and the units used to describe font size.
Font Colours
When choosing font colour in Plant Parents digital products, unless otherwise stated the
colour chosen must be one of the two following brand colours: Charoal, or Cream. This
choice is made based on the colour being used behind the text, to ensure sufficient contrast.
When styling text that is on a dark background, choose Cream for your font colour.
When styling text that is on a light background, choose Charcoal for your font colour. For
more details on brand colours, see the Colours section of this
design system.
Font Size Units
When styling any type of typography element in a Plant Parents digital product, always use responsive rem units to list the font size. By choosing these responsive units, your font will scale on different devices, while retaining it's ratios to other on-screen elements and text and maintaining readability.
Font Family
All typography elements across Plant Parents digital products share the same font, Lucida Sans. This
font offers good readiblity, and is generally available across most browsers. However, since some
browsers may not have access to this font, make sure to define a font family, so that if the font
is not available, the browser can adapt to a similar backup font listed in the family.
The font family used in Plant Parents products is the following: 'Lucida Sans', 'Lucida Sans
Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif. To see an example of
this implementation in use, view either the Positive Typography
or Negative Typography pens on Codepen.
Typography Guidelines for Text Elements
Please refer to the following examples when implementing headings, body text, or links in Plant Parents products. View both the Positive Typography and Negative Typography examples displayed below on Codepen.
H1 Element
H2 Element
H3 Element
H4 Element
H5 Element
H6 Element
This is a paragraph element, used for body text.
This is a paragraph element that contains a sample link.
H1 Element
H2 Element
H3 Element
H4 Element
H5 Element
H6 Element
This is a paragraph element, used for body text.
This is a paragraph element that contains a sample link.