GovDeals Typography

Table of Conents

Web & Digital	Font Family	Display
Headings	Social & Display	Print

Introduction

Typography is a key component of our visual identity, reflecting the brand’s professional and trustworthy nature. Proper use of the typography guidelines provided here will enhance communication and reinforce brand cohesiveness, maintaining a consistent look across materials and platforms.

It is also essential to keep copy concise, allowing the audience time to absorb the content and comprehend its meaning fully.

“Typography is what language looks like.” — Ellen Lupton

Web and Digital

Font Family & Fallback

Liquidity Services has chosen the Roboto font family as its primary typography selection because of its sleek and professional appearance. The versatile typeface is highly legible on different devices with varying sizes and resolutions.

This font family is also available through Adobe Fonts and is licensed for both personal and commercial use.

Stack Fallback

In instances where Roboto is not available for digital applications, Liquidity Services will utilize the specific system font stacks designated for each operating system. This ensures consistency and recognition of text across different OS platforms. System fonts act as a fallback option that is compatible with Roboto, providing users with a seamless experience across various devices. It is worth noting that Bootstrap, Material, and other CSS frameworks have similar fallback options.

Font Family Examples Below:

Download Roboto:

Click to download Roboto fonts from Google

Display

A Display type-scale is a set of font sizes designed to establish a hierarchy of information. This type of typography is commonly employed in web and print designs for prominent sections such as headlines, banners, and other high-impact areas where the message must be communicated effectively.

The font sizes are meticulously selected to uphold visual hierarchy, balance, and proportionality.

Type-Scale

Display Extra Large

Font weight: Light
Font Size: 96px (72pt) | Font Size: 64px (48pt)
Line height: 116px (87pt) | Line height: 80px (60pt)

Display Large

Font weight: Light
Font Size: 88px (66pt) | Font Size: 56px (42pt)
Line height: 108px (81pt) | Line height: 68px (51pt)

Display Medium

Font weight: Light
Font Size: 72px (54pt) | Font Size: 44px (33pt)
Line height: 88px (66pt) | Line height: 56px (42pt)

Display Small

Font weight: Light
Font Size: 56px (42pt) | Font Size: 32px (24pt)
Line height: 68px (51pt) | Line height: 30px (22pt)

Headings

Heading type-scale is integral for establishing visual hierarchy and structuring content logically. It generally consists of a set of headings - starting with H1 and descending in size and importance - that are distinct from the body text.

Character spacing: It is recommended to add 0.5 to 1 times the font size offers a good balance; for instance, if the font size is 16px then 8px-16px character spacing should be used for optimal accessibility.

Line Height: A recommended practice is to multiply 1.2 to the display and Headings.

Type-Scale

Heading H1

Font weight: Bold, Font Size: 40px (30pt) | Font weight: Bold, Font Size: 32px (24pt)
Letter Spacing: 20px (15pt) | Letter Spacing:16px (12pt)
Line height 48px (36pt) | Line height 48px (36pt)

Heading H2

Font weight: Bold, Font Size: 32px (24pt) | Font weight: Bold, Font Size: 26px (19pt)
Letter Spacing: 16px (12pt) | Letter Spacing: 16px (12pt)
Line height 40px (30pt) | Line height 32px (24pt)

Headings H3

Font weight: Bold, Font Size: 26px (19pt) | Font weight: Bold, Font Size: 22px (16pt)
Letter Spacing: 16px (12pt) | Letter Spacing: 12px (9pts)
Line height 32px (24pt) | Line height 28px (21px)

Heading H4

Font weight: Bold, Font Size: 22px (16pt) | Font weight: Bold, Font Size: 22px (16pt)
Letter Spacing: 16px (12pt) | Letter Spacing: 12px (9pts)
Line height 32px (24pt) | Line height 28px (21px)

Heading H5

Font weight: Bold, Font Size: 18px (13pt) | Font weight: Bold, Font Size: 16px (12pt)
Letter Spacing: 8px (6pt) | Letter Spacing: 8px (6pt)
Line height 24px (18pt) | Line height 20px (15pt)

Heading H6

Font weight: Bold, Font Size: 16px (12pt) | Font weight: Bold, Font Size: 14px (10pt)
Letter Spacing: 8px (6pt) | Letter Spacing: 8px (6pt)
Line height 20px (15pt) | Line height 20px (15pt)

Lead Paragraph, Body, & Small

Type-Scale

Lead Paragraph: Typically the first paragraph of a web page. It’s larger than body text to grab attention.

Font weight: Light, Font Size: 20px (15pt) | Font weight: Light, Font Size: 18px (13pt)
Letter Spacing: 12px (9pt) | Letter Spacing: 12px (9pt)
Line height 30px (22pt) | Line height 28px (21pt)

Body Paragraph (default): Typically the main text of a web page.

Font weight: Regular | Font Size: 16px (12pt)
Letter Spacing: 8px (6pt)
Line height 24px (18pt)

Small Text: Often used for disclaimers, captions, and other text that aren’t the main focus.

Font weight: Regular | Font Size: 14px (10pt)
Letter Spacing: 8px (6pt)
Line height 20px (15pt)

Extra Small Text: Often used for disclaimers, captions, and other text that aren’t the main focus.

Font weight: Regular | Font Size: 12px
Letter Spacing: 8px (6pt)
Line height 20px (15pt)

In Action:

The graphic below showcases the impact of type setting, creating a structured information hierarchy using the information provided above. By following these guidelines, you can guide the reader’s eye towards important information, resulting in easy scanning of the page and quick access to desired content.

Social & Display Ads

As you create Social & Display Ads, keep in mind the key elements that contribute to their effectiveness.

Use Roboto as your primary typeface.
Follow the 80/20 rule for graphics and copy.
Allow for sufficient breathing room.
Be mindful of minimum legible sizes when viewing ads at 100%. See the type scale chart for sizing ranges.
Consider file dimensions

Font Weights

Heading H1 & Emphasized Text: Bold
Heading H2 & Body Paragraph: Regular

PPI (Pixel Per Inch): PPI determines an image’s resolution and level of detail by measuring the number of pixels per inch, with higher PPI resulting in sharper images. It is calculated by dividing the number of pixels by the physical size in inches, and a PPI of at least 72 is recommended for web graphics.

General and Canvas Type-Scale for Ads

The following type-scale conversions are based on the most highly recommended ad sizes and cover both general and canvas-specific conversions.

Canvas Size	Canvas PPI	Outside of Canva	Canva Font Size Dropdown
1200 x 1200	96 ppi	H1: 69px (52pt) - 80px (60pt) H2: 46px (35pt) - 56px (42pt) Body: 36px (27pt) Emphasized: Same as body	H1: 52px (39pt) - 60px (45pt) H2: 36px (27pt) - 42px (35pt) Body: 27px (20pt) Emphasized: Same as body
1200 x 628	96 ppi	H1: 52px (39pt) - 60px (45pt) H2: 38px (29pt) - 46px (35pt) Body: 29px (22pt) Emphasized: Same as body	H1: 39px (29pt) - 45px (33pt) H2: 29px (22pt) - 36px (27pt) Body: 36px (17pt) Emphasized: Same as body
250 x 250	72 ppi	H1: 17px (13pt) - 20px (15pt) H2: 12px (9pt) - 15px (11pt) Body: 12px (9pt) Emphasized: Same as body	H1: 13px (10pt) - 15px (11pt) H2: 9px (7pt) - 11px (8pt) Body: 6px (4.5pt) Emphasized: Same as body
300 x 250	96 ppi	H1: 17px (13pt) - 20px (15pt) H2: 12px (9pt) - 15px (11pt) Body: 12px (9pt) - 15px (11pt) Emphasized: Same as body	H1: 13px (10pt) - 15px (11pt) H2: 9px (7pt) - 11px (8pt) Body: 9px (7pt) - 11px (8pt) Emphasized: Same as body
300 x 50	72 ppi	H1: 13px (10pt) - 17px (13pt)	H1: 10px (8pt) - 13px (10pt)
320 x 100	72 ppi	H1: 21px (16pt) H2: 16px (12pt)	H1: red14px (11pt) - 16px (12pt) H2: red10px (8pt) - 12px (9pt)
160 x 600	96 ppi	H1: 19px (14pt) - 21px (16pt) H2: 12px (9pt) - 13px (10pt) Body: 12px (9pt) Emphasized: Same as body	H1: 14px (11pt) - 16px (12pt) H2: 9px (7pt) - 10px (8pt) Body: 9px (7pt) - 10px (8pt) Emphasized: Same as body
728 x 90	96 ppi	H1: 21px (16pt) - 25px (19pt) H2: 13px (10pt) - 16px (12pt) Body: 13px (10pt) - 16px (12pt) Emphasized: Same as body	H1: 16px (12pt) - 19px (14pt) H2: 10px (8pt) - 12px (9pt) Body: 10px (8pt) - 12px (9pt) Emphasized: Same as body

In Action:

Print

Headings Type-Scale

To ensure readability and clarity in print designs, it is recommended to use Arial as the primary typeface and Roboto when in Canva. When designing, consider:

Leading: Multiply the font size by 1.2 for display and headings, and use 1.5 for body text.
Example: 40px (30pt) x 1.2 = 48px (36pt) leading
H1: Use for main keywords and subject matter.
H2: Use for sections with related keywords to the H1.
H3: Use for subcategories for easier scanning
Consider file dimensions, content, and visuals when positioning copy, allowing for sufficient breathing room.

General and Canvas Type-Scale for Print

The following type-scale conversions are based on the most highly recommended Print heading and body sizes and cover both general and Canva-specific conversions.

Print

PPI: 300 PPI
Font (outside of Canva): Arial | Font (within Canva): Roboto
Display Font Weight: Regular
Heading H1-H6 Font Weight: Bold

Outside of Canva*

Display Medium: 50px (38pt)
Display Small: 39px (29pt)
H1: 30px (23pt)
H2: 16px (12pt)
H3: 14px (11pt)
H4: 12px (9pt)
Lead Paragraph: 18px (14pt)
Body + Lists: 12px (9pt)
Small Text: 9px (7pt)
Legal & Copyright: 8px (6pt)

In Canva:

Display Medium: 38px (29pt)
Display Small: 29px (22pt)
H1: 23px (17pt)
H2: 12px (9pt)
H3: 11px (8pt)
H4: 9px (7pt)
Lead Paragraph: 14px (11pt)
Body + Lists: 9px (7pt)
Small Text: 7px (5pt)
Legal & Copyright: 6px (5pt)

*Canva Canvas sizes: Canvas size in Canva may differ from a typical print display. For example, the platforms 8.5in x 11in letter size paper default is set to 816px x 1056px. Where are the standard pixel size would be 612 x 792. Display and font sizes may vary depending on platform.