The font used in the header is called Argor Biw Scaqh which was created by Jean-Pierre Mallaroni. The main text is written using Old London created by Dieter Steffmann. Both fonts were downloaded from dafont.com and converted to all @font-face formats by The css3 Font Converter (Note that I don't use all capitals when writing acronyms like "css3". As a calligrapher, I came to the conclusion that it was never a good idea using all capitals when using a Black-Letter or Gothic script because the letters are too ornate to be easily read. I also think it looks too "gangsta tattoo").
For those who are curious about the images used in this example, the scroll was made with a modified version of a photo taken by Diego da Silva. It was cut up into three pieces using The Gimp. The top of the scroll is the background-image of the header tag, and the bottom is the footer tag. Because I needed a transparency around the headers and footers, I saved both of these images are 16 colour pngs. (yes, it would have looked nicer as full rgb pngs with an alpha channel, but the resultant images were around 160 kilobytes in size compared to the 20k they are now). I also used Drew Diller's png fix, Remy Sharp's html5 enabling script and Paul Irish's conditional css design pattern so it would look right in the various versions of Internet Explorer. The middle of the scroll, saved as a jpeg, is the background of the article tag. For the scenery behind the scroll, I modified a photo of a stain glass window in Zennor taken by Steve Parker. I changed the image by straightening it using The Gimp's native Perspective Transform and the Windows Version of the Focus Blur Plug-in. To optimize download speed, I saved the image as a jpeg with a Quality Level of around 30-40%, since the blurring didn't demand a very accurate image.
In addition, the "drop cap" at the beginning of each paragraph was created by assigning special css rules using the p:first-letter selector, including a white text-shadow (which doesn't show up in Internet Explorer, but it does degrade nicely). Since no extra markup is needed to produce it, the semantic meaning of the document is preserved. The drop-caps' background image is from a photo of a stain glass window I took on holiday in France. I also used Argor Biw Scaqh for them because of its ornate, hand-written feel.
Lastly, I used css3's nth-child pseudo-class to ensure the widths of the drop-caps are the same in non-Webkit browsers which don't allow us to control their width and height directly. Internet Explorer gets a little help using nth-child with selectivzr.
The result is some nice layout using very simple, standards compliant and semantically correct html5 markup and an easy-to-understand css3 stylesheet. No tables were harmed in the production of this web page. A big thanks goes to my friend Earl Cousins for ensuring that my colour choices were not too outrageous.