Primary Heading: St John’s House

Preamble and Paragraphs

This is a test document to determine the suitability of the chosen typeface for the subject material: a preservation trust for St John’s House, a 15th Century building in Bridgend. The main typeface is Griffosfont by Manfred Klein, based on a typeface cut by Francesco Griffo. I’ve matched it with Pablo Ugerman's Rosarivo for the italic as none was provided, and browsers will usually try to compensate for the lack of a proper italic by slanting the roman, which looks horrible.

The roman includes anachronistic titling figures. Titling or uppercase figures were first used in the late 1700s - prior to that numerals were written in the manner of lowercase text, with 3, 4, 5, 7 and 9 having descenders and 6 and 8 ascenders. Luckily the small caps variant includes the proper oldstyle figures, so I’ll solve that problem by setting the first font in the stack to a subset of the small caps including just the figures (once I manage to fix the inconsistent x-height the FontSquirrel generator applies to the small caps file).

Initial paragraphs begin with double-height drop caps, with the remainder of the initial line in small caps (the small caps are currently faked by the browser, I need to fix the small-caps variant of Griffosfont). Following paragraphs are indicated by a one em indent rather than the modern blank line.

Let’s have a blockquote

“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”

On Lists, both Ordered and Unordered (& others)

Unordered Lists

The default bullets for unordered lists are circle, disc and square. None really fit the character of the piece, so I’ve replaced them with a diamond (U+2666) using the :before pseudo-element absolutely positioned to the left of the list items (to preserve margins and spacing).

This is a list item
So is this - there could be more
Make sure to style list items too:
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
- Not forgetting child list items
A couple more
top level list items

Ordered Lists

I’ve again overridden the styling for ordered lists, as the upper roman / lower roman numerals are more in keeping.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
2. Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.

Definition Lists

Definition term: This would be the definition of the above term. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Lorem ipsum dolor sit amet: Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tables

Tables should be a relatively restrained affair, I feel.

Table Heading	Table Heading	Table Heading	Table Heading
table data	table data	table data	table data
table data	table data	table data	table data
table data	table data	table data	table data
table data	table data	table data	table data

Down to the third level heading. Unless the document is particularly complex I can’t see more than three levels being used

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.