Recently I designed a page using nothing but fonts, HTML and CSS for a competition at fontdeck. I decided to use responsive design, using media queries to style the page differently depending on your browser width. (This experiment also prompted me to write my views about responsive design.)
Because my quote wasn’t very short and had a lot of supporting text, I decided to style it to give the main quote precedence. This looked great at normal window sizes.
My typography example at "normal" browser width.
But the page was very typographically inflexible. I realized I could make it look better at both widescreen resolutions and mobile phone resolutions using media queries:
My typography example in "widescreen mode."
My typography example at a narrow width for mobile viewing.
For fonts I used Bodoni Recut, Light and Urbano Condensed. I enjoyed using Fontdeck for this project, and I will most likely use them again when I redesign this site. However, using these fonts will cost me $17.35 a year for just that one domain, so I imagine after the competition I will unsubscribe that license and put the money toward fonts I will use much more elsewhere! $17.35 is a lot to spend on one little page, after all 