Usage
Text is the one of the main ways to communicate and convey ideas in product. Different styles of text construct the hierarchy of web pages which highly influences the user experience for our users. We’ve developed a typography landscape for all standard typefaces in Houzz web products which ensures that the UI is optimized to be highly legible, scalable, and also provides a clear and easy way for our designers to apply them to our amazing products.
Types
Houzz uses Figtree Regular, Medium and Semibold for all web based products.
Sizes
In order to construct a clear hierarchy across all platforms, we defined three hierarchies in the typography system: headers, body text and notation. For each hierarchy, there will be levels of different font sizes with specific line heights for various use cases. Page and section headers will use semibold only, while body and notation text can use either regular or semibold font weight
The line-height of each font size is multiple of 4px, so when putting components together, it will perfectly follow our rule of 4px.
| Size | Value | mWeb |
| megaPlus | 40px / 44px | 28px / 32px |
| mega | 32px / 36px | 24px / 28px |
| xLarge | 28px / 32px | 20px / 24px |
| large | 24px / 28px | 20px / 28px |
| mediumPlus | 20px / 24px | 20px / 28px |
| medium | 20px / 28px | 18px / 26px |
| smallPlus | 18px / 26px | 16px / 24px |
| small | 16px / 24px | 14px / 20px |
| xSmall | 14px / 20px | 14px / 20px |
| tiny | 12px / 16px | 12px / 16px |
| inherit | inherit / inherit | inherit / inherit |
Best Practices
- Left-align for readability, avoid center-align unless absolutely necessary
- Bold white text over image for readability
- Avoid all caps except for caption if necessary: not international friendly, harder to read
- Strong / regular / subdued
- Title > header > body
- Max width for text boxes for readability