Typography

Last updated: 11/10/2024

Font family

Arial is the default font.

Font styles

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

Arial bold 700 is for headings.

Font sizes

Font size Recommended use

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

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

Headings

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

Headings Recommended use

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.

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

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.

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

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>