Schedule typography - Athens Orthopedic Clinic Twilight Criterium

The schedule is based on our custom HTML structure – it is a little bit more complex than other typography elements but it was necessary to create a proper HTML structure. We will describe the code based on the below example:


&lt;dl class="gk-schedule"&gt;
&lt;dt&gt;&lt;strong&gt;Friday, &lt;/strong&gt;April 27, 2012&lt;/dt&gt;
&lt;dd&gt;
&lt;strong&gt;10:00-12:00&lt;/strong&gt;
&lt;div class="gkcol1"&gt;
&lt;div&gt;&lt;span&gt;Registration&lt;/span&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/dd&gt;
&lt;dd&gt;
&lt;strong&gt;12:00-14:00&lt;/strong&gt;
&lt;div class="gkcol2"&gt;
&lt;div&gt;Location:&lt;strong&gt; San Jose, Scene 1&lt;/strong&gt;&lt;a href="#"&gt;The Born This Way Ball&lt;/a&gt; &lt;small&gt;Lady Gaga&lt;/small&gt;&lt;/div&gt;
&lt;div&gt;Location:&lt;strong&gt; San Jose, Scene 2&lt;/strong&gt;&lt;a href="#"&gt;Battle Born Tour&lt;/a&gt; &lt;small&gt;The Killers&lt;/small&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/dd&gt;
&lt;/dl&gt;

As we can see the structure is based on the definition list (dl) with class gk-schedule. The definition term elements are used to create the date (you can highlight words in this element using the strong elements). The content of the specific hours for a day are defined in the definition description elements (dd). As it was listed – every dd element starts with the strong element – it is the period of time for a specific elements then the next element is the div with class gkcolX where is is a number from range 1-5 – here you can specify up to 5 columns with the events.

Every event can contain few informations:

place (as a strong element)
event name (as a link – usually to the longer description)
and small additional information (in the small element)