Set up fonts and text styling
Typography plays a critical role in how your customers perceive your brand within Userorbit. Consistent fonts and text styling between your product and the Userorbit widget create a seamless experience. This guide covers how to configure every aspect of typography.
Step 1: Open typography settings
Navigate to Settings → Design and scroll to the Typography section. You will see options for font family, heading styles, and body text configuration.
Step 2: Select a font family
Userorbit supports a range of font options:
- System fonts — uses the default font stack of the visitor operating system (San Francisco on macOS, Segoe UI on Windows, etc.). This option provides the fastest load time since no fonts need to be downloaded.
- Google Fonts — choose from a curated selection of popular Google Fonts such as Inter, Roboto, Open Sans, Lato, and Poppins.
- Inherit from parent — the widget inherits whatever font your application uses. This is useful when you want pixel-perfect consistency with your product.
Select the option that best matches your application. If your product uses Inter, selecting Inter in Userorbit ensures visual harmony.
Step 3: Configure heading styles
Headings appear in announcement titles, section headers, and modal titles. You can adjust:
- Font weight — choose from regular, medium, semibold, or bold. Semibold and bold work well for headings to create clear visual hierarchy.
- Font size scale — control the relative size of headings. The default scale works for most use cases, but you can increase it if your brand uses larger, more prominent headings.
Step 4: Configure body text
Body text is used for descriptions, feedback content, and general paragraph text. Adjust these settings:
- Base font size — the default is 14px, which works well for widget contexts. Increase to 16px if readability is a priority or if your application uses a larger base size.
- Line height — controls the spacing between lines of text. A line height of 1.5 to 1.6 provides comfortable readability for paragraph content.
- Font weight — regular (400) is standard for body text. Avoid using light weights (300) for body copy as they can reduce readability on lower-resolution screens.
Step 5: Verify hierarchy and consistency
After setting your typography options, review the live preview carefully. Check the following:
- Headings are clearly distinguishable from body text.
- Font sizes feel proportional — headings should be noticeably larger than body text but not overwhelming.
- The font matches what your users see elsewhere in your product.
Maintaining brand consistency
Here are practical tips for keeping your typography consistent:
- Match your product font — the single most impactful typography decision is using the same font family as your application.
- Stick to one font family — using a single font family for both headings and body text keeps the design clean and reduces load time.
- Respect your brand guide — if your brand specifies font weights and sizes, apply those same values in Userorbit.
- Test with real content — preview with actual announcement text and feedback items to see how your choices look with real-world content lengths and formatting.