Type Scales
GitLab utilizes three type scales depending on the context: UI, Documentation Markdown, and Compact Markdown.
UI type scale
UI typography is used for any text within GitLab that is not markdown.
Base
14px is the base size of body copy for UI typography.
Label text
Our UI type scale includes “label” text which is used for short-form content. Label text differs from long-form text because it doesn’t include margins which allows for easier alignment with other UI elements.
Long-form content includes copy in modals and empty states, whereas short-form content includes help text and popover messages.
Responsive
The h1 and h2 headers within our UI type scale are responsive. All other type options within this scale are not dependent on screen size.
Documentation Markdown type scale
Documentation Markdown is defined as any Markdown that is written outside of issuable pages, such as a README or Wiki page. Content written using Markdown includes typography that contains fixed margins and increased line-heights to improve readability. Label text is not available for documentation Markdown because all Markdown is considered long-form content.
Base
16px is the base size of body copy for documentation Markdown.
Responsive
The h1, h2, and h3 headers within our documentation Markdown scale are responsive. All other type options within this scale are not dependent on screen size.
View Documentation Markdown type scale in Pajamas UI Kit →
Compact Markdown type scale
Within certain views, the Markdown type scale is decreased in order to more closely align copy with other UI components. Compact Markdown is used for descriptions and comments on issue and merge request pages. Label text is not available for compact Markdown because all Markdown is long-form content.
Base
14px is the base size of body copy for compact Markdown.
Responsive
The h1 header within our compact Markdown scale is responsive. All other type options within this scale are not dependent on screen size.
Related
Last updated at: