Typography - Publications Office Web Guide
Dockbar

Typography

Last updated: 11/10/2024

Font family

Arial is the default font.

Font family Font stack CSS variable
Arial Arial, sans-serif; --gs-base-font-family-default

Font styles

Arial Regular 400 is the default font; the other styles are used to make words or phrases stand out.

Body text styles
Style CSS variable / style Example
Regular 400 --gs-base-font-weight-default The quick brown fox jumps over a lazy dog
Regular 400 Italic --gs-base-font-weight-default / <em> The quick brown fox jumps over a lazy dog
Bold 700 --gs-base-font-weight-default / <strong> The quick brown fox jumps over a lazy dog
Bold 700 Italic --gs-base-font-weight-default / <strong> <em> The quick brown fox jumps over a lazy dog

Arial bold 700 is for headings.

Heading styles
Style CSS variable / style Example
Bold 700 --gs-base-font-weight-heading The quick brown fox jumps over a lazy dog

Font sizes

Size Value Utility class CSS variable Example
2xs 0.75rem / 12px gs-u-font-size-2xs --gs-base-font-size-2xs Lorem ipsum
xs 0.813rem / 13px gs-u-font-size-xs --gs-base-font-size-xs Lorem ipsum
s 0.875rem / 14px gs-u-font-size-s --gs-base-font-size-s Lorem ipsum
m 1rem / 16px gs-u-font-size-m --gs-base-font-size-m Lorem ipsum
l 1.125rem / 18px gs-u-font-size-l --gs-base-font-size-l Lorem ipsum
xl 1.25rem / 20px gs-u-font-size-xl --gs-base-font-size-xl Lorem ipsum
2xl 1.5rem / 24px gs-u-font-size-2xl --gs-base-font-size-2xl Lorem ipsum
3xl 1.75rem / 28px gs-u-font-size-3xl --gs-base-font-size-3xl Lorem ipsum
4xl 2rem / 32px gs-u-font-size-4xl --gs-base-font-size-4xl Lorem ipsum
5xl 2.25rem / 36px gs-u-font-size-5xl --gs-base-font-size-5xl Lorem ipsum
6xl 2.625rem / 42px gs-u-font-size-6xl --gs-base-font-size-6xl Lorem ipsum
Special use case
Size Value Utility class CSS variable Example
sp-15 0.938rem / 15px gs-u-font-size-sp-15 --gs-base-font-size-sp-15 Lorem ipsum

The most common use cases for website content editors are indicated in bold.

Size Value Use
2xs 0.75rem / 12px Tiny short text (1 narrow line maximum) for extra fine print. Use in extremely exceptional cases when "xs" does not suffice.
xs 0.813rem / 13px Very small short text (under 3 lines) for fine print, compacted table data and UI components
s 0.875rem / 14px Small body text (1-2 short paragraphs), captions, table data and UI components
sp-15 0.938rem / 15px For UI components when you really need something in between "s" and "m". Use sparingly.
m 1rem / 16px Default body text (good for extended reading), captions, table data and UI components, H6
l 1.125rem / 18px Large body text (excellent for extended reading), H5
xl 1.25rem / 20px H4
2xl 1.5rem / 24px H3
3xl 1.75rem / 28px H2
4xl 2rem / 32px H1
5xl 2.25rem / 36px Other extra large text
6xl 2.625rem / 42px Other extra large text

Use these guidelines for consistent and optimal results. If specific use cases require smaller/bigger headings, simply change the CSS variables in your heading CSS definitions.

For example, if you require smaller headings (on a site, page or component-level), modify the font-size property of your CSS as in the example below.

Modified CSS code

.gcss-op h1 {
    font-size: var(--gs-base-font-size-3xl);
}
.gcss-op h2 {
    font-size: var(--gs-base-font-size-2xl);
}

Original CSS code

.gcss-op h1 {
    font-size: var(--gs-base-font-size-4xl);
}
.gcss-op h2 {
    font-size: var(--gs-base-font-size-3xl);
}

Line heights

Line height Value CSS variable Example Use
xs 1 --gs-base-line-height-xs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque.
Buttons, navigation, etc. (under 1 line)
s 1.15 --gs-base-line-height-s
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque.
Headings, lead-in text (1-2 lines maximum)
m 1.35 --gs-base-line-height-m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque.
Short text, captions (less than 1 paragraph)
l 1.5 --gs-base-line-height-l
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque.
Short body text (under 2 paragraphs) with narrow line length
xl 1.62 --gs-base-line-height-xl
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque.
Body text for extended reading
2xl 1.75 --gs-base-line-height-2xl
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque.
Shorter text (under 2 paragraphs) that is meant to stand out

Headings

Arial Bold 700, in color gray-100 with line-height: 1.15 is used for headings.

Heading Size value CSS variable (font-size) Comments
Heading 1 2rem / 32px --gs-base-font-size-4xl OP websites previously using their service accessible color 110 are encouraged to update to gray-100.
Heading 2 1.75rem / 28px --gs-base-font-size-3xl  
Heading 3 1.5rem / 24px --gs-base-font-size-2xl  
Heading 4 1.25rem / 20px --gs-base-font-size-xl  
Heading 5 1.125rem / 18px --gs-base-font-size-l  
Heading 6 1rem / 16px --gs-base-font-size-m  

General font size guidelines are indicated in Font size recommended use. However, there are additional aspects to consider for headings.

In UI components (such as navigations, cards and carousels), coloured text boxes and page regions (such as a side bars and footers), headings are usually gray-100 (HEX #333333) and smaller.

Use the following font sizes for UI component, coloured text boxes or region headings / titles:

  • m (1rem / 16px) for small
  • l (1.125rem / 18px) for default
  • xl (1.25rem / 20px) for large

Exceptions should be treated based on specific use case requirements.

Example: Card headings

In both cases below, the heading font-size is always 1.125rem instead of the larger default settings. This is done beacuse component and page region headings / titles must adapt to where they are placed; often their is reduced space or a different visual strategy may be required compared to body headings. Dispite possible visual differences, the heading structure is still coded correctly. Lear more about page headings

Card body text lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card body text lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS code

.gcss-op .gs-card p.gs-title,
.gcss-op .gs-card h2.gs-title,
.gcss-op .gs-card h3.gs-title,
.gcss-op .gs-card h4.gs-title,
.gcss-op .gs-card h5.gs-title,
.gcss-op .gs-card h6.gs-title {
    font-family: var(--gs-base-font-family-heading);
    font-size: var(--gs-base-font-size-l)!important;
    line-height: var(--gs-base-line-height-s)!important;
    font-weight: var(--gs-base-font-weight-heading);
    color: var(--gs-base-color-gray-100);
    margin-top:unset;
    margin-bottom:0.75rem;
}

HTML code

<div class="gs-card rounded">
    <div class="gs-card-body">
        <h2 class="gs-title">(Card 1) H2 Heading: 1.125rem / 18px</h2>
        <p>Card body text lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>
<div class="gs-card rounded">
    <div class="gs-card-body">
        <h3 class="gs-title">(Card 2) H3 Heading: 1.125rem / 18px</h3>
        <p>Card body text lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

Line length

The optimal line length for body text is considered to be 50 to 80 characters per line, including spaces.

Note: We are currently working on implementing this guideline.

Lists

Unordered list

Example

  • List item number 1
  • List item number 2
  • List item number 3

HTML code

<ul>
    <li>List item number 1</li>
    <li>List item number 2</li>
    <li>List item number 3</li>
</ul>

Unordered list without bullets

Example

  • List item number 1
  • List item number 2
  • List item number 3

HTML code

<ul style="list-style-type:none;">
    <li>List item number 1</li>
    <li>List item number 2</li>
    <li>List item number 3</li>
</ul>

Ordered list

Example

  1. List item number 1
  2. List item number 2
  3. List item number 3

HTML code

<ol>
    <li>List item number 1</li>
    <li>List item number 2</li>
    <li>List item number 3</li>
</ol>
Implement title

How to implement

Font

Arial is a widely used font available in most operating systems and devices.

Setup

First include the Publications Office global CSS in your web content element (WCE) in order to have access to fonts and styles. There are two ways:

1 Manual

Introduce a div tag with the class gcss-op into your WCE as in the example below:

<div class="gcss-op">
    Your page code here
</div>

2 Apply by selecting

This is the recommended and simpler method. For details, go to OP Global CSS instructions in the Liferay Knowledge Base.

Implementation

With the Publications Office global CSS applied to your WCE, all style settings will automatically work.

To apply the different style options outlined aboved, introduce the classes or CSS variables to the HTML elements.

Example

Sentence with default m body font size.

Sentence with 5xl font size.

Paragraph with default xl line height for body text extended reading... lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque tortor.

Paragraph with line height xs for buttons, navigation, etc. (under 1 line)... lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque tortor.

HTML code

<h2>Heading 2 with default 3xl font size</h2>
<h2 class="gs-u-font-size-l">Heading 2 with l font size</h2>
<p>Sentence with default m body font size.</p>
<p class="gs-u-font-size-5xl">Sentence with 5xl font size.</p>
<p><strong>Paragraph with default xl line height for body text extended reading...</strong> lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque tortor.</p>
<p style="line-height:var(--gs-base-line-height-xs)!important;"><strong>Paragraph with line height xs for buttons, navigation, etc. (under 1 line)...</strong> lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula arcu, dictum sed pharetra eu, vestibulum eu est. Aliquam pharetra laoreet nunc a dictum. Proin suscipit pellentesque tortor.</p>