Etaluma Typography Style Guide

I preserved the site’s existing font family direction — Montserrat for headings and Roboto for body copy — while updating the global typography system for better readability. The main changes are black text instead of gray, lighter body copy weight, more consistent heading sizes, and a clearer page-header treatment using white heading text with an orange-yellow preheader accent.

Typography Update Summary

Previous styling: The live site used gray text, heavier heading weights, and some inconsistent sizing between page sections, Divi modules, and smaller column layouts.

Updated styling: The staging site keeps the existing brand fonts but improves readability with black text, a lighter body weight, a clearer heading hierarchy, and more consistent sizing across the site.

Font Families

Headings: Montserrat

Body copy: Roboto

This keeps the site aligned with the existing Divi theme settings while making the overall typography feel cleaner, more modern, and easier to read.

H1: Primary Page Title

New style: Montserrat, 48px 44px, 700 weight, black.

Use for: The main title of a page, such as “Etaluma Microscopes” or “Live-Cell Imaging Applications.”

How this improves the current site: The H1 is slightly more controlled and intentional, creating a strong page title without feeling overly heavy.

H2: Main Section Heading

New style: Montserrat, 36px 34px, 700 weight, black.

Use for: Major sections within a page, such as “Featured Applications,” “Product Options,” or “Why Choose a Lumascope?”

How this improves the current site: H2 headings now create clearer breaks between major page sections while avoiding the heavier gray styling used on the current live site.

H3: Supporting Section Heading

New style: Montserrat, 28px 26px, 600 weight, black.

Use for: Subsections inside a larger H2 section, such as individual application areas, product features, or research-use categories.

How this improves the current site: H3 headings provide a clear middle level in the hierarchy, so supporting content can stand out without needing oversized or overly bold text.

H4: Feature or Card Heading

New style: Montserrat, 22px, 600 weight, black.

Use for: Smaller content blocks, cards, blurbs, testimonials, product highlights, or feature names.

How this improves the current site: H4 headings are distinct from body copy while staying smaller than true section headings, making product cards and callout areas feel more organized.

H5: Small Subsection Heading

New style: Montserrat, 18px, 600 weight, black.

Use for: Minor subsections, compact labels, grouped details, or small supporting headings.

How this improves the current site: H5 gives the design a useful smaller heading option, reducing the need to manually bold body text for emphasis.

H6: Preheader / Eyebrow Text

New style: Montserrat, 14–15px 16px, 700 weight, uppercase, increased letter spacing.

Use for: Short preheaders above large headings, such as “Live-Cell Imaging,” “Research Applications,” or “Product Highlight.”

How this improves the current site: The preheader now works as a deliberate design accent instead of looking like ordinary small text. It adds structure and polish, especially in hero sections.

Body Copy

New style: Roboto, 17px 18px, 400 weight, black, with generous line spacing.

Use for: Standard paragraphs, product descriptions, application summaries, technical explanations, and general page content.

How this improves the current site: Body text is now larger, darker, and lighter in weight than the previous gray styling, improving readability across longer technical pages.

Header / Hero Text Color System

Preheader: Yellow-orange, #ea964e.

Main header title: White, usually H1 or H2.

Supporting header copy: White body text.

How this improves the current site: Hero sections now have a more polished and consistent visual system. The yellow-orange preheader adds warmth and brand personality, while white title and body text create stronger contrast against dark or image-based backgrounds.

Example Preheader

Advanced Live-Cell Imaging, Made More Accessible

Etaluma microscopes are designed to simplify fluorescence imaging for researchers who need reliable performance inside or outside the incubator.

Flexible Imaging Tools for Modern Research

From routine cell monitoring to long-term fluorescence studies, Lumascope microscopes help labs capture high-quality images while maintaining a compact, easy-to-use workflow.

Designed for Incubator-Based Microscopy

The Lumascope platform supports live-cell imaging workflows by allowing researchers to observe cells over time while preserving stable environmental conditions.

Compact Footprint

With a small, portable design, Lumascope microscopes fit easily into crowded lab spaces, biosafety cabinets, and standard incubators.

Application Areas

Common uses include fluorescence imaging, cell culture monitoring, wound healing assays, confluence tracking, and longitudinal live-cell studies.

Research Workflow Highlight

Use this smaller heading style for preheaders, labels, callouts, or short section introductions that need visual emphasis without competing with larger page headings.