DLx Pattern Library

DLx Pattern Library

Source: fonts.less, line 1

1 Typography

These are the primary fonts used in DLx projects. Other fonts may be used as appropriate when representing linguistic data; however, fonts used for actual DLx interfaces should be limited to the ones shown here. Projects should use a line height of 1.5.

Source: fonts.less, line 75

1.1 Fira Sans

The Fira Sans set of fonts (developed by Mozilla) are the primary fonts used for DLx interfaces.

Example

Fira Sans Regular is the default font used throughout DLx tools, with a line height of 1.5. At larger sizes this font tends to look bold, in which case it may be a good idea to use Fira Sans Light (font-weight: 300;) instead.

<p style="font-family: 'Fira Sans';"><strong>Fira Sans Regular</strong> is the default font used throughout DLx tools, with a line height of 1.5. At larger sizes this font tends to look bold, in which case it may be a good idea to use Fira Sans Light (<code>font-weight: 300;</code>) instead.</p>

Example

Fira Sans Regular Italic is used for italics.

<p style="font-family: 'Fira Sans'; font-style: italic;"><strong>Fira Sans Regular Italic</strong> is used for italics.</p>

Example

Fira Sans SemiBold is used as the bold version of Fira Sans Regular.

<p style="font-family: 'Fira Sans'; font-weight: bold;"><strong>Fira Sans SemiBold</strong> is used as the bold version of Fira Sans Regular.</p>

Example

Fira Sans SemiBold Italic is used as the bold version of Fira Sans Regular Italic.

<p style="font-family: 'Fira Sans'; font-weight: bold; font-style: italic;"><strong>Fira Sans SemiBold Italic</strong> is used as the bold version of Fira Sans Regular Italic.</p>

Example

Fira Sans Light (font-weight: 300;) may also be used for the default font, depending on what weight suits the page best. It provides a slimmer and slightly less bulky font profile, which is especially good for large headings.

<p style="font-family: 'Fira Sans'; font-weight: 300;"><strong style="font-weight: 500;">Fira Sans Light</strong> (<code>font-weight: 300;</code>) may also be used for the default font, depending on what weight suits the page best. It provides a slimmer and slightly less bulky font profile, which is especially good for large headings.</p>

Example

Fira Sans Light Italic is the italicized version of Fira Sans Light.

<p style="font-family: 'Fira Sans'; font-weight: 300; font-style: italic;"><strong style="font-weight: 500;">Fira Sans Light Italic</strong> is the italicized version of Fira Sans Light.</p>

Example

Fira Sans Medium (font-weight: 500;) is used as the bold version of Fira Sans Light.

<p style="font-family: 'Fira Sans'; font-weight: 500;"><strong style="font-weight: 500;">Fira Sans Medium</strong> (<code>font-weight: 500;</code>) is used as the bold version of Fira Sans Light.</p>

Example

Fira Sans Medium Italic is used as the bold version of Fira Sans Light Italic.

<p style="font-family: 'Fira Sans'; font-style: italic; font-weight: 500;"><strong style="font-weight: 500;">Fira Sans Medium Italic</strong> is used as the bold version of Fira Sans Light Italic.</p>

Source: fonts.less, line 236

1.2 Fira Mono

The Fira Mono set of fonts (developed by Mozilla) are used for representing code blocks and other monospaced text.

Example

Fira Mono is used for monospaced code blocks.

<p style="font-family: 'Fira Mono';"><strong>Fira Mono</strong> is used for monospaced code blocks.</p>

Example

Fira Mono Bold is used for emphasized or bolded code.

<p style="font-family: 'Fira Mono'; font-weight: bold;"><strong>Fira Mono Bold</strong> is used for emphasized or bolded code.</p>

Source: fonts.less, line 283

1.3 Charis SIL

The Charis SIL fonts (developed by SIL) are used for representing linguistic transcriptions.

Example

Charis SIL is used for text that needs to support Unicode characters, such as data input fields. It should typically have font-size: 1.075em; so that it occupies the same line height as Fira Sans.

<p style="font-family: 'Charis SIL'; font-size: 1.075em;"><strong>Charis SIL</strong> is used for text that needs to support Unicode characters, such as data input fields. It should typically have <code>font-size: 1.075em;</code> so that it occupies the same line height as Fira Sans.</p>

Example

Charis SIL Italic is used for italicized text that requires Unicode support, such as inline presentation of example data.

<p style="font-family: 'Charis SIL'; font-size: 1.075em; font-style: italic;"><strong>Charis SIL Italic</strong> is used for italicized text that requires Unicode support, such as inline presentation of example data.</p>

Example

Charis SIL Bold is used for bolded text that requires Unicode support.

<p style="font-family: 'Charis SIL'; font-size: 1.075em; font-weight: bold;"><em>Charis SIL Bold</em> is used for bolded text that requires Unicode support.</p>

Example

Charis SIL Bold Italic is used for bolded and italicized text that requires Unicode support.

<p style="font-family: 'Charis SIL'; font-size: 1.075em; font-weight: bold; font-style: italic;"><u>Charis SIL Bold Italic</u> is used for bolded and italicized text that requires Unicode support.</p>