Hey there! This is the Uniform version 3 documentation site. If you’re looking for version 4, go here instead.
/
Typography
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.
Don'tmix typefaces with platforms.
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).