Typography

Frontfire provides a rich set of basic typography styles. These styles are consistent and encourage design best practices without you having to think about it too much.

Headers

The default HTML header elements are <h1> through <h6>. They should be used correctly by their semantics, not their appearance. Most browsers’ default level-1 header has a too big font size which is why many people lazily start their document structure on the 4th level, completely leaving out the document root and the first three levels of structure. Frontfire comes with smaller header sizes by default to make it easier to use headers correctly without additional styling effort.

Text content

This is a default paragraph with text content, defined with the standard <p> element.

Paragraphs have a vertical margin between each other to make it clear to the user that a separate thought or topic has started. Here’s some more useless text to make the margin more obvious even in wider browser windows. Here’s some more useless text to make the margin more obvious even in wider browser windows.

Paragraph content can be aligned to the left side (which is default without any special markup) with the left-align CSS class or to the right side with the right-align CSS class.

Paragraph content can be centered with the center CSS class.

Finally, paragraph content can be justified with the justify CSS class. This only becomes more visible with multiple lines of text in a paragraph. Here you can see that all content lines in the paragraph have the same length, regardless of the actual width of the words in a line, unlike the other paragraphs on this page. This is achieved by evenly distributing the width of all white-space between the words. In very narrow paragraphs and without hyphenation, this can easily lead to highly noticeable inconsistencies in word distance. So use it with care.

Hyperlinks are defined with the <a> element. They use a blue text colour by default because this is the established UI convention since the beginnings of the web and users can immediately recognise the blue link as clickable and navigatable. The colour and underlining effect can be configured.

Disable links

Text may also contain some inline code(); with the <code> within flow content. Besides code there can also be non-semantically monospace-styled text with the <tt> element. The <pre> and <samp> elements look the same. Monospace font can be applied to <textarea> elements with the monospace CSS class.

Press Ctrl+Any to tell the user what hotkey to press to activate some function with the <kbd> element.

Should it be absolutely necessary to not wrap certain text phrases, you can apply the nowrap class to it, either on the parent element altogether or by surrounding the affected content with a <span> element.

Separator

Separators with the <hr> element can be used to visually separate content with a horizontal line instead of whitespace.

Lists

• There can be
• unordered lists with the <ul> element that
• only show a single bullet graphic
• before each list item.

1. Ordered lists with the <ol> element have numbered
2. items each with a number increased
3. by one. This makes clear that order is relevant
4. and allows references to other items by their number.

Tables

Tables allow the presentation of tabular data. They really should not be used for layouting content as it was popular in the 1990s before the rise of CSS. You can define tables with the <table>, <tr>, <th> and <td> elements as usual. CSS classes can be applied to the <table> element to configure the appearance.

This is a plain table with no additional styling.

This table has the no-border, no-vgrid and center classes to eliminate the outer table border and the inner vertical grid lines, and align all cell content centered, respectively. The alternative to no-vgrid is no-hgrid to remove the horizontal grid lines instead. Both are combined in the no-grid class that removes all inner grid lines.

All table content can be centered with the center class applied to the table. Individual cells can be aligned differently by applying the left, center and right classes to each <th> or <td> element (shown in the second-last row).

Tables can be made more compact with the compact CSS class. This reduces the cell padding and removes the inner grid lines.

The no-outer-padding class removes the outer cell padding towards the border of the table, but leaves the inner cell padding between adjacent cells intact. This is most useful in combination with no-border (as shown here) and without any cell background colours. It aligns the table content exactly with the surrounding text.

Loading indicator

Small

Medium

(Default)

Large