Typography

PageLines DMS typography is based on the powerful Bootstrap providing styling for tables, forms, buttons, and other standard interface elements.

Adjusting Fonts

Pagelines DMS comes with a selection of pre-installed fonts you can use on your site. To select a font or to edit the current font’s settings select the ‘typography’ tab from the DMS control panel.

The typography panel is split into two sections, Primary text and Text headers. Both sections contain options to choose a font and select the font’s weight and size.

Next to each options title there is a refresh button, which can be used to update the preview window with the current selection.

Note: The base font size is a reference that will be scaled for the text used throughout your site.

Note: Font weights with a * icon do not take affect on all browsers.

Adjusting font color

Pagelines DMS allows you to choose a custom font color for both the main text color and the linked text color. To set your color options select the global options tab from the DMS control panel and select color and style menu.

For each of the text color options you can either enter the hex value directly into the color field, or select the desired using the inbuilt color picker. Use the refresh button next to each option to update the preview window with your new selection.

Typography Examples

Headings

All HTML headings, <h1> through <h6> are available.

h1. Header 1

h2. Header 2

h3. Header 3

h4. Header 4

h5. Header 5
h6. Header 6

Body

PageLines DMS’s global default font-size is 14px, with a line-height of 1.55em. This is applied to the and all paragraphs. In addition, <p> (paragraphs) receive a top/bottom margin of 1.55em.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ultricies dolor nec ante scelerisque consequat. Ut aliquet semper ipsum, a vehicula leo varius facilisis. Praesent lobortis consectetur venenatis.

Nullam pretium faucibus dui vel venenatis. Cras dapibus, dolor in suscipit lobortis, sapien eros tristique erat, ac eleifend augue quam posuere mauris. Donec dignissim diam eget tortor blandit ullamcorper. Maecenas sodales ornare nisi, in malesuada elit interdum eget.

<p>...</p>

Lead body

Make a paragraph stand out by adding .lead.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ultrices viverra vehicula. Etiam commodo metus in ipsum ultricies in sodales.

<p class="lead">...</p>

Emphasis

Make use of HTML’s default emphasis tags to make your text standout.

Bold

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italic

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Emphasis classes

Display meaning through color with a handful of emphasis utility classes.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
<ul>
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
<ol>
  <li>...</li>
</ol>

Unstyled

A list of items with no list-style or additional left padding.

  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
<ul class="unstyled">
  <li>...</li>
</ul>

More Examples

For more information and examples on typography, head over to Bootstrap’s typography page.