Web Design Workshop 10 Content Fonts

Our Content (posts and pages) contain the main substance we want to bring in front of people. It is therefore important to deliver well formatted and edited content to first make it easy to read and second to give it an attractive look corresponding, as the case may be, to visitors’ expectations.

Post Content

What is actually on display in each post depends on the WordPress and Theme script. WordPress offers quite a lot of possibilities and the Theme developer will then add the necessary hooks to the theme to display the desired data at the ideal spot.

The web designer will then style these elements by defining fonts, sizes, margins, colors and so on.

On the below example we can distinguish 6 different types of information on display on the XO blog post.

Content and Fonts"

1. Post Title

Find at about line 386 the #leftcontent.post h1:

#leftcontent .post h1, #leftcontent .ind-post h1, #leftcontent .twopost h1, #leftcontent .threepost h1 { margin-top: 5px; font-size: 36px; font-family: Georgia, Times, serif; font-weight: normal; line-height: 38px; color: #222; }

This is where the h1 (Title) is defined for all pre-configured layouts (remember your Semiomantics XO layout switch in your dashboard).
On our demo site, which is only 800 px wide we will limit the title size to serif fonts 32px normal in stead bold in a line with 38px height:

Title 32 px Times normal

Looks fine to me; here is the code:

#leftcontent .post h1, #leftcontent .ind-post h1, #leftcontent .twopost h1, #leftcontent .threepost h1 { margin-top: 5px; font-size: 32px; font-family: Times, serif; font-weight: normal; text-align: left; line-height: 38px; color: #000; }

2. The Date

The date is displayed in small fonts, rather to mark it’s existence than to provide vital information.
In your style-sheet, you find it under #leftcontent .date on line 400 on the zero-style style-sheet:

#leftcontent .date { margin-bottom: 5px; font-style: italic; color: #888; }

I prefer normal to italic, namely for small fonts and I will make the color darker to use small but readable fonts:

#leftcontent .date { margin-bottom: 3px; font-style: normal; color: #222; }

Note: I have decreased the margin-bottom to 3 pixels to decrease the vertical distance between date and author.

2a The Author

The author’s name is added, similar to the date above. You find it right after the date on your style-sheet:

#leftcontent .meta { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444; }

Unless you add a font size line to the date, date and author’s name will follow the same call. In as much as I am concerned, I keep it small similar to the date:

#leftcontent .meta { font-family: Tahoma, Arial, Verdana, sans-serif; font-size: 11px; color: #222; }

Formatting the font and size will impact also on the date as you see:

Author

3. The Subtitle (commercial release only)

Semiomantics XO allows you to format a special subtitle which will display between the h1 of the title and the h2 subtitle you edit in the post content.

Subtitle

This subtitle has semantic properties which are easily readable by search engines. It is therefore an important element for editors and publishers. It replaces the recommended h2 subtitle in the blog post in the commercial XO versions.

The subtitle is defined in lines 422 – 430 on the style-zero style-sheet and as from line 441 on the demo style sheet we are using here:

/* This is your subtitle style */
#leftcontent p.sub { font-size: 24px; line-height: 26px; font-weight: bold; font-style: italic; margin: 10px 0 0; }

For the purpose of this exercise I have formatted the Subtitle in red Tahoma uppercase as follows and as on display on the above screen-shot:

#leftcontent p.sub { color: #B30000; font-family: Tahoma, Arial, sans-serif; font-size: 18px; line-height: 26px; font-weight: normal; font-style: normal; text-transform: uppercase; margin: 10px 0 0; }

4. Post Subtitle h2

This subtitle is the Semiomantics standard recommended subtitle on top of each post, formatted in h2. To use it in the XO RC version, add a few lines to your style-sheet after the block called #leftcontent:

#leftcontent h2 { font-family: Tahoma, Arial, Verdana, sans-serif; color: #000000; font-weight: bold; font-size: 18px; }

This particular h2 needs to be defined here separately as we don’t want to mix it up with the general h2 settings.

H2 Subtitle

5. Post Content Font

As said before, sans-serif fonts are easier to read online than serifs. Therefore we will use our preferred font family Helvetica, Verdana, Arial for the content.
In your style-zero lines 340 – 344 show the default:

#leftcontent { float: left; margin: 0 10px; padding: 0; }

Depending on the screen resolution, sans-serif fonts take a bold look as from 12px, such as you may observe on Verdana and Arial. We therefore opt for 11 pixels and add the required calls as follows to demo style sheet, lines 347 and following:

#leftcontent { float: left; color: #000000; margin: 0 10px; padding: 0; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 11px; }

Also look at the post entry code on line 416 on the demo and 395 on the style-zero and adapt the code:

#leftcontent .post .entry { font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 11px; line-height: 18px; }

On my screen with resolution 1680, the display looks as follows:

Post Display with screen resolution 1680

6. Additional Meta Information (commercial release only)

Special coding in the Semiomantics XO script allows here for semantic information for the purpose of communicating better with search engines. A special entry is placed in the style-sheet and picked up by the Semiomantics SEO module. On RC scripts this is without effect. Contact me if you need help with this.
We finally get our final style which will apply to posts and pages: