Pay close attention to how you organize type in the Hudl interface, especially when opting out of our standard type component.
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.
When designing for the web, we use Helvetica. We also have font stack fallbacks of Arial and sans-serif.
When designing for Android, we design with Roboto.
When designing for Windows products, we design with Segoe UI.
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.
Headlines establish the first-level typographical hierarchy for sections throughout the interface.
One: Establishes top-level hierarchy. Stick to one per interface.
Subheads create ownership and define a specific area of an interface, such as a list or small text block.
Default: The same size as default text. It conveys ownership, but doesn’t dominate the text block that follows.
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.
Think of item titles as a subhead for a single item. They provide extra weight when necessary, but aren’t essential for everyday use.
Default: Suitable for the majority of interfaces.
Don'tmix typefaces with platforms.
Douse the correct typeface for the platform listed.
When writing words, follow Hudl’s voice and tone and copy guidelines.
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.).
On the web we’re using root ems (rem) with a 16px base. This means 1rem = 16px, or 1px = 0.0625rem.
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).
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).