Typography

OCL uses Roboto — loaded at weights 400, 500, 700. The typography scale is the MUI v5 default: oclweb3/src/index.jsx does not override theme.typography, so every Typography variant inherits from Material UI's published scale. The specimens below are rendered with the same CSS values MUI applies at runtime.

In code, use MUI's <Typography variant="h1"> rather than raw HTML tags. The variant name is the contract — spacing, letter-spacing, and line-height come from the theme.

Headings

h1 · 96px · light (300)

Term Browser

h2 · 60px · light (300)

Repositories

h3 · 48px · regular (400)

CIEL Source

h4 · 34px · regular (400)

Search concepts and mappings

h5 · 24px · regular (400)

Concept details

h6 · 20px · medium (500)

Associations

Body & subtitles

subtitle1 · 16px · regular (400)

A subtitle introducing a section of a concept detail view.

subtitle2 · 14px · medium (500)

A smaller subtitle used in dense list rows and card headers.

body1 · 16px · regular (400)

The quick brown fox jumps over the lazy dog. OCL supports Unicode including ñ, ü, and 中文.

body2 · 14px · regular (400) · default body text

Most of TBv3's content renders at this size, including concept names, mapping details, and list rows. This is the default body text of the app.

Supporting variants

button · 14px · medium (500) · uppercase

Create concept

caption · 12px · regular (400)

Last updated 2 days ago · CIEL v2024.03

overline · 12px · regular (400) · uppercase · tracked

Section label

Custom type in the app

A few places in oclweb3 set typography via sx instead of variants. The most notable is the repository name in RepoHeader:

CIEL (Columbia International eHealth Laboratory)

https://ciel.example.org/fhir/CodeSystem/ciel

From oclweb3/src/components/repos/RepoHeader.jsx.

Reference

MUI default typography: mui.com/material-ui/customization/typography
Roboto weights loaded: 400, 500, 700 (see assets/site.css)
If you need to override a variant, update oclweb3/src/index.jsx and mirror the change here.