Guidelines

Typography

Design
Code

Modify text to structure content.

Pay close attention to how you organize type in the Hudl interface, especially when opting out of our standard type component.

Typefaces

We strive for our products to be reliable and predictable. For this reason, we use system typefaces for most of our content. System typefaces come pre-installed on every device. They are battle tested, free to use and have little to no technical overhead.

Helvetica

When designing for the web, we use Helvetica. We also have font stack fallbacks of Arial and sans-serif.

Roboto

When designing for Android, we design with Roboto.

San Francisco

When designing for Apple, we design with San Francisco. Follow Apple’s Human Interface Guidelines for guidance on dynamic type sizes and font variants.

Segoe

When designing for Windows products, we design with Segoe UI.

Usage

When it comes to typography in our products, form follows function. We aim for optimal readability and clear hierarchy on a variety of devices. This is handled for you with our Type components.

Headline

Headlines establish the first-level typographical hierarchy for sections throughout the interface.

We help coaches and athletes win with video.

One: Establishes top-level hierarchy. Stick to one per interface.

Subhead

Subheads create ownership and define a specific area of an interface, such as a list or small text block.

We help you win.

Default: The same size as default text. It conveys ownership, but doesn’t dominate the text block that follows.

Text

Text is the most common typographical element within our interfaces. Think of it as the body copy.

If sending a check, please include the invoice number in the memo.

Default: Ideal for most text situations.

Item Title

Think of item titles as a subhead for a single item. They provide extra weight when necessary, but aren’t essential for everyday use.

Email Address

Default: Suitable for the majority of interfaces.

typography-mix-typefaces-dont

Don'tmix typefaces with platforms.

typography-mix-typefaces-do

Douse the correct typeface for the platform listed.

Microcopy Guidelines

When writing words, follow Hudl’s voice and tone and copy guidelines.

Follow our non-label guidelines when typesetting headlines, subheads and text. Follow our UI label guidelines when typesetting item titles.

Units

For the sake of simplicity, we use pixels (px) as our standard unit of measurement for fixed values in this documentation. Pixel values will need to be converted for each platform. We chose pixels as our the common denominator because it’s the default unit in screen graphics software (Sketch, Photoshop, Illustrator, etc.).

Web

On the web we’re using root ems (rem) with a 16px base. This means 1rem = 16px, or 1px = 0.0625rem.

Apple

For Apple, type and every other dimension uses points (pt). This means that in the @1x display resolution 1px = 1 pt. For different display resolutions the px value will need to be adjusted accordingly (e.g., 1pt @2x = 0.5px and 1pt @3x = 0.33px).

Android

For Android, type and every other dimension uses density-independent pixels (dp). This means that in the medium density (mdpi) display density 1px = 1dp. For different display densities the px value will need to be upscaled accordingly (e.g., 1dp @hdpi = 1.5px, 1dp @xhdpi = 2px, 1dp @xxhdpi = 3px, and 1px @xxxhdpi = 4px).