First attempt at translating sample images into HTML

On browsers that support Web fonts, it seems silly to still be using 
images for displaying font samples.  So I've tried to translate the 
samples into HTML.  The result is a bit of a mess, but it roughly works.  
The images are still there, and the stylesheet tries to arrange that 
they get used where appropriate, and that speech synthesizers don't try 
to read the samples.

bedstead.css

@@ -23,10 +23,6 @@ pre {
     line-height: 1em;
 }
 
-.separated {
-    font-feature-settings: 'ss16';
-}
-
 h1 {
     font-size: 5em;
     font-weight: inherit;
@@ -54,6 +50,32 @@ img {
     max-width: 100%;
 }
 
+.separated {
+    font-feature-settings: 'ss16';
+}
+
+/*
+ * When we're using text as a sample of Bedstead, it should be hidden
+ * from browsers without font support, and the image sample should
+ * be used instead.
+ */
+@media braille, embossed, speech, tty, (grid) {
+    .text-sample {
+	display: none;
+    }
+    .image-sample {
+	display: block;
+    }
+}
+.text-sample {
+    font-size: 50px;
+    display: block;
+    speak: never;
+}
+.image-sample {
+    display: none;
+}
+
 /* Colours that make Bedstead look better (imitating my green monitor) */
 body {
     background-color: #031109;

index.xhtml

@@ -25,8 +25,22 @@
       alphabets.  It also has a large number of custom-designed glyphs,
       all of them of course based on the same 5 × 9 pixel grid.</p>
 
-    <p><img alt="[ A sample of Bedstead's characters ]" src="sample.png"/></p>
-
+    <p class="image-sample">
+      <img alt="[ A sample of Bedstead's characters ]" src="sample.png"/>
+    </p>
+    <blockquote class="text-sample">
+      <pre>ABCDEFGHIJKLMNOPQRSTUVWXYZ
+abcdefghijklmnopqrstuvwxyz
+<span style="font-variant: small-caps">abcdefghijklmnopqrstuvwxyz</span>
+ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ
+αβγδεζηθικλμνξοπρςστυϕφχψω
+АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
+абвгдежзийклмнопрстуфхцчшщъыьэюя
+אבגדהוזחטיךכלםמןנסעףפץצקרשת
+0123456789¼½¾!?.,:;'"‘’“”()[]{}
+-—+×÷&lt;=>/\|£$¥¢¤%&amp;*#@¶©®℗
+</pre>
+    </blockquote>
     <p>Bedstead is available in six widths.  The standard version of
       Bedstead is based on a square pixel grid.  This is good for
       displays with square pixels, but not entirely faithful to the
@@ -39,7 +53,19 @@
       Bedstead Condensed and Bedstead Semi Condensed provide intermediate
       widths.</p>
 
-    <p><img alt="[ Various widths of Bedstead ]" src="extended.png"/></p>
+    <p class="image-sample">
+      <img alt="[ Various widths of Bedstead ]" src="extended.png"/>
+    </p>
+    <blockquote class="text-sample">
+      <div>
+	<code style="display: inline-block; width: 10em;">Bedstead</code>
+	<code style="font-stretch: expanded">Extended</code>
+      </div>
+      <div style="font-size: 2em; font-stretch: ultra-condensed;">
+	<code style="display: inline-block; width: 5em;">Ultra Condensed</code>
+	<code style="font-stretch: extra-condensed;">Extra Condensed</code>
+      </div>
+    </blockquote>
 
     <p>The outline version of Bedstead is generated by an ISO C program
       which emits a Spline Font Database file for use with