|
|
|
Dissecting CSS Styles
Or, How Do They Make that Cool Text Style on AdaptivePath.com?
November 21, 2004
The subject of web font size arose on the STC
Usability SIG recently.
I polled the group on whether the font size issue was well-resolved
on the AdaptivePath.com site.
The quick answer seems to be yes, which then brings up the question,
how do they do it? This article describes how to look under the
hood to see how various web styles are defined, so you can achieve
the same results.
To get the details of the AdaptivePath font size, one needs the
following resources:
- Hours of spare time
- Potentially
thousands of dollars of software, though experience and
guile are often good substitutes
- Lots of computer experience. I have 22 years. This was just barely
enough.
This alternate universe, in which a simple thing like legible
type requires "rocket surgery" (Steve Krug), is what the computer
world calls p-r-o-g-r-e-s-s. But a favorable view of this dilemma
is that we are really just in the early years of computers, much
like when cars were started with hand cranks. Put your goggles
on so the mud doesn't splatter. Here's how to dissassemble their
font style:
- Open a page whose style you want to dissect. We'll use "http://www.adaptivepath.com/events/".
- View the source code for the area of the page in question.
(Either click in that area to establish context and use the menu
function,
View Source; or right-click in the area and choose View Source.)
- In the source code, search for ".css" repeatedly
and note all of the CSS files referenced.
- Ignore any line beginning with "<link " that also
includes the phrase 'media="print" '. The remaining
CSS's possibly cascade (overlay) to define the styles on the
page.
- From the lines you found with ".css" in them, copy value
of the HREF attribute, such as "/css/low.css" to
the clipboard.
- Paste this value into your browser's Address bar to form the
appropriate path to the CSS file. For instance, for "/css/low.css",
paste it right after the ".com" because the slash
(the one at the beginning of /css/low) indicates the root of
the site.
Our example yields "adaptivepath.com/css/low.css".
- Press Enter or otherwise go to the page. On my system, the
CSS file opens in the associated program. For me this is a stylesheet
editor called TopStyle.
- Repeat the last three steps, opening each of the CSS's you
found.
- Back in the source of the page, identify an element whose style
you are interested. Look at all of the surrounding tags, codes
within angle brackets <>, particularly for "class" attributes.
(You can save the page itself from browser when feasible, or from
the TXT source, and open it in a visual editor to do this more
efficiently.) For my example, I searched for the word "committed".
All I see is a <p> tag surrounding the paragraph.
- The <p> tags are implicitly within the <body> tags,
I think. For a simple site, you would now look in the style sheets
for any changes to these two styles. But alas, AdaptivePath is
not a simple site, far from it... as in "A Land Far, Far,
Away."
- Here's where the complexity of Adaptive Path site shows the
ugly face of current web markup. Although touted as a solution
to the
past nightmare of working with tables, we now have a veritable
horror movie of style construction and workarounds. You can
learn about this ghoulish spell by searching the web for "tableless
css." When I open the source in Dreamweaver, I see the
following style genealogy for this paragraph:
< body.col-SMX#events><div#content><div.wrap><div.maincol><p>.
- The text after the periods (col-SMX#events,#content, .wrap,
and .maincol) could be applying a style. You could scan the CSS
for
these, but I first tried removing each of them and refreshing
the instance of my locally-saved page, to see when the text changed.
Voila, when I removed ".maincol" the text got larger!
Here's what maincol shows in the style sheet:
.maincol {
float:left;
width:510px;
margin:0;
font-size:85%;
line-height:1.5em;
}
- And here's what the body tag shows:
body {
color:#000;
font:x-small Verdana,Sans-serif;
voice-family: "\"}\"";
voice-family:inherit;
font-size:small;
} html>body {font-size:small;}
- When you experiment with all of these values, what you find
is that the attractive text of AP is from these three items:
font:x-small Verdana,Sans-serif;
font-size:85%;
line-height:1.5em;
- The Verdana font gives the blockier, wider letter proportion
that works with rather than against the pixellated electronic
display.
- The 85% gives the size that looks sophisticated but just big
enough to read in default browser size.
- And most subtle of
all, the increased
line height dramatically enhances the comfort of reading!
I believe that this is more than just a passing fad. That's why
I've gone to all this trouble. In the same way that newsprint has
established very persistent norms that work best in its medium,
these ideal settings should persist at least until we see if "electronic
ink" establishes new rules.
My hands hurt. It's time for me to go read my
favorite book (Amazon)!
|