AllSurplusDeals Typography

Typography

Selecting the right typefaces is important for expressing a desired tone and quality in any piece of communication. Through the thoughtful selection of fonts, we can determine the reader’s journey through the text, capture attention, create an emotional response, and reinforce our brand’s identity.

In addition to selecting typefaces carefully, it’s essential to keep copy concise to avoid overwhelming audiences, and this allows them time to absorb content and comprehend its meaning fully.

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

---

Web and Digital

Font Family & Fallback

The Liquidity Services Corporate has chosen the [Roboto font family](https://fonts.google.com/specimen/Roboto) as its primary typography selection because of its sleek and professional appearance. Christian Robertson designed Roboto to be a versatile typeface with a mechanical skeleton and open curves, making it suitable for use on different devices with varying sizes and resolutions. Furthermore, this font family is also available through [Adobe Fonts](https://fonts.adobe.com/fonts/roboto) 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](https://gist.github.com/don1138/5761014) 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.

 

Roboto (download font)

Roboto Medium (download font)

Roboto Bold (download font)

Roboto Light (download font)

Font Family Examples Below:

Display

A Display type-scale is a set of font sizes designed to establish a hierarchy of large headings and typography that captures the viewer’s attention and generates a powerful visual impact. 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 type-scale usually comprises of larger font sizes compared to the standard text typeface and leverages a light weight font styles. The font sizes are meticulously selected to uphold visual hierarchy, balance, and proportionality. Consider the following:

• Line Height: It is recommended to add 1.2 to display and Headings (e.g., 40px (30pt) x 1.2 = 48px (36px))

Line height: Refers to the vertical spacing between lines of text, measured from baseline to baseline. It is also known as “line spacing” or “leading.”

The selected font weights and scale pairs well with a 4-point grid. Allowing our digital applications to conveying the desired tone and quality in any communication.

---

Type-Scale

Display Extra Large

• Font weight: Light | 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. This helps content writers create clear, consistent pieces, improving user experience as readers get a distinct visual cue about the relative importance or structure of each section. Consider the following:

• 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

Lead Paragraph ,Body, & Small type-scaling is an essential part of designing aesthetically pleasing and effective web pages. Generally speaking:

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

• Body text: Typically the main text of a web page.
• Small & extra small text: Often used for disclaimers, captions, and other text that aren’t the main focus.
• Character spacing: A recommended practice is to multiply 0.5-1 times the font size is maximum legibility.
• Line Height: A recommended practice is to multiply the font size by 1.5 for lead, body & small paragraphs.

Type-Scale

Lead Paragraph

• 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)

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

Small Text

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

Extra Small Text

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

---

Platform Type Setting

This page showcases the impact of typography on creating a structured information hierarchy through the practice of typesetting. By selecting appropriate font sizes and weights, headings can be emphasized to guide the reader’s eye towards important information, resulting in easy scanning of the page and quick access to desired content.

*Above image content below

Display Small 

Use primary keyword and answer the searchers primary question.

Lead Paragraph

No need to get clever. Tell people exactly what you’re offering, then use this space to communicate your key value proposition. On average, pages with 125 words or less convert 15% more. But between 250 and 750 words, there’s very little difference.

H1 - Attention Driven Content 

Body - This instructional copy is intended to serve as place holder copy for new designs. Keep the typeface simple and sans serif. This makes your copy easy to read and keeps the page looking professional. Share a little about yourself as a business owner, or maybe describe what makes your product or service unique. Give visitors one more reason to care about your offer and want to buy from you.

H2 - What Our Customers Say

Body - Pages targeting 7th grade or lower reading ease seem to convert better. Every additional 250 words on a page lowers the conversion rate by 20%. Avoid empty buzzwords like exceed, excel and cutting-edge. They could hurt your conversion. Avoid “angry” words (slash, limited, damage, harmful) — your customers might already be upset. Using 5% or more of your copy to evoke joy can increase your conversion rates. Having 5+% of your copy (words like “gain,” “successful,” “improve,” “succeed”) to create feelings of joy can help boost conversion.

H3 - Some More Information About Our Business

Body - Share a little about yourself as a business owner, or maybe describe what makes your product or service unique. Give visitors one more reason to care about your offer and want to buy from you. This is your last shot at converting someone. Make it good. (But not too pushy.) If you can get around 5% conversion, you’re doing great. Above 9.3%, and you’re beating 90% of your competitors.

---

Social & Display Ads

As you create Social & Display Ads, it’s important to keep in mind the key elements that contribute to their effectiveness. Here are some tips to help you create successful ads:

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

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 Canva Type-Scale for Ads

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

---

Digital Ad Type Setting

This page showcases the impact of typography on creating a structured information hierarchy through the practice of typesetting. By selecting appropriate font sizes and weights, headings can be emphasized to guide the reader’s eye towards important information, resulting in easy scanning of the Ad and quick access to desired content.

---

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.

Leading: Refers to the vertical spacing between lines of text, measured from baseline to baseline. It is also known as “line spacing” or “line height.”

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 Canva 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)

Canva Font Size Dropdown

• 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 canvas may differ from a typical print canvas 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.

---

Print Type Setting