Soukie's Place

keeping track of random thoughts

Typography and CSS

Detail of this page

Examples of css

One would assume that computers advance every human endeavor. Consider the art of typography and layout: Computers and internet have changed these completely. But in many ways, not for the better. In the hands of a professional, the results of using quality digitized fonts and desktop publishing can be excellent. But large quantities of text that surround us (e-mail, web pages, flyers, restaurant menus) are less fortunate.

A lot of what we read on the computer screen or on paper consists of built-in system fonts and the layout sophistication of the current word processors and web standards. Unfortunately, the web standards are quite inadequate for producing properly formatted pages. Correct handling of orphans and widows, hyphenation, drop caps or columns is still next to impossible. To make things worse, the World Wide Web really fails with the key aspect of typography — the typeface: the designer is left with some ten fonts that can be safely used.

František Štorm, a famous type designer, explains that the main goal of lettering and layout is to carry the information in the most legible way. Good typography therefore should not be noticeable. But the aesthetics are also important. The relative importance of legibility and ‘artistry’ in design will be different for a poster, a web portal or a book. It follows there is no universal font; it depends on the usage, size and also times (compare FuturaSample of Futura typeface
Source: Wikimedia Commons. Creative Commons Attribution ShareAlike 2.5.
, designed 1927, with the architecture style of that period).

Storm Type Foundry

Founded by František Štorm in 1993, Storm Type Foundry is offering hundreds of high quality types. Štorm is possibly most famous for producing a digital version of the Baskerville typeface. In fact, it is Štorm’s excellent renditionSample of Baskerville typeface that you will see when you visit the Wikipedia entry for Baskerville.

If you are reading this site in a compatible browserYou need to be using the latest version of Firefox or Safari, otherwise you will be seeing a sans-serif font., you will notice it is actually set using the Lido stf typeface. The type was designed by Štorm after receiving a request from a newspaper to produce a modernized replacement for Times.

The situation in the digital realm used to be even worse than today though. And that brings me to the css from the title. Cascading Style Sheets were devised as a way of separating the formatting rules from the content. This greatly enhanced the control over the design of the pages. The standard was slow to take off though: Not all browsers supported the standard recommendations, or interpreted them incorrectly. To this day, the latest versions of mainstream browsers render officially supported css rules slightly differently so the designers have been bogged down by devising workarounds to make sure the pages would display identically across various versions of all browsersFor Soukie’s Place, I am supporting only the latest versions of Chrome, Explorer, Firefox and Safari. Since Explorer does not support any CSS3, I recommend Firefox or Safari..

The latest set of Cascading Style Sheets rules (called level 3) has been under development for ten years now, and includes a powerful support for fonts. Although there has been an option of embedding fonts in the past, it did not support major formats, and has not seen much use. ‘CSS3’ is going to provide the features needed but there are concerns about sharing and protecting the fonts, as well as ‘misuse’ of the technology that could actually lead to lower aesthetic quality.

Safari and Mozilla Firefox browsers support the new ‘@font-face’ feature already now. On the other hand, Microsoft took a different route: Internet Explorer in the standards mode of its latest release did not include css level 3 (which is not official yet) and stopped supporting their proprietary codes that were achieving similar effects (e.g. opacityI still have not untangled the mess of first not supporting opacity at all, then providing a very special -ms-filter:"progid... code, and now it seems to work in Standards mode anyway (unless Standards has its Quirks sub-mode).).

Let us hope the finalization of CSS3 will not take long, and that its implementation will be more consistent across browsers than has been the case until now. It would be a blessing for those who care about the aesthetic aspect of the web.

Technical Notes

Cascading Style Sheets can be very powerful and enable complex behavior without any programmatic scripting. Some examples on this web include arrows for links pointing outside the website, a magnifying glass that appears when you point at an expandable picture, hovering footnotes, or adding single quotes for the condensed font instead of applying italic.

For the technically minded, I am including the code for the “magnifying glass” (see it in action at the top) since to my knowledge, an unscripted solution with no special markup in content has not been done yet. If yes, let me know. Otherwise, here goes Soukie’s CSS Image Overlay:

div.wp-caption {
   position: relative;
   display: block;
}
.wp-caption a[href$=".jpg"]:hover:before {
   content: url(magnify.png);
   position: absolute;
   right: 20px;
   top: 20px;

Where wp-caption happens to be the class of the container for images but can be any div containing the image. If you like it, feel free to use it and link back to the example.

5 Comments »

feed icon Feed

Still battling with css to make a header image hover over another image, this being a background image.

Using default theme, which I’ve converted to make unique.

Hope this tut will set me on the right course.

Many thanks

Keneth Prescott, October 14, 2011:

I love your wp theme, wherever would you down load it from?

Pavel Soukenik, March 4, 2012:

The design of the site is my adaptation of Peter A. Jensen’s Fjords04 theme template (Fjords04 was based on Qwilm! created by Oriol Sanchez whose work was based in turn on Lokesh Dhakar’s design).

Trackbacks/Pingbacks

Pingback: Soukie's Place » Art on iPhone on September 12, 2009
Pingback: Soukie's Place » A Walk Through the Changes on September 17, 2009

Your comment