Text styles

Written by Benji April 7th, 2010

The Columnist has a strong emphasis on typography. It uses an exponential formula for text hierarchy and the greatness of Helvetica along with column layouts and newspaper theme.

Continue reading →
Close

This post demonstrates the variable text elements and styles supported in The Columnist WordPress theme. If you see that I may have missed any, please let me know — a quick comment below will do the trick.

For the purposes of this demonstration, Latin dummy text will be used as a placeholder. Shall we start with the exponential typographic hierarchy:

Lorem ipsum

Curabitur vitae

Suspendisse etam

Praesent placerat

Regular paragraph text looks like this consectetur adipiscing elit.

Aenean a regular link magna. This link may appear as visited if you have already visited my website. Class taciti strong sociosqu torquent elit consect etam mordor.

The block quote uisque pulvinar neque eu lectus volutpat at porta tellus dapibus. Donec ut mi magna torquent elit consect etam mordor.

A couple of lists:

  • Lorem pulvinar nunc ipsum
  • Adipiscing etam
  • Donec ut mi magna
  • Morbi sit amet metus lectus
  • Suspendisse ultrices orci ut risus

Order that list:

  1. Dolor sit amet
  2. Etam meta mordor
  3. Morbi malesuada
    • Lorem ipsum
    • Adipiscing etam
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar neque eu lectus volutpat at porta tellus dapibus. Fusce lobortis eros vel mauris viverra elementum. Nunc ac nunc erat, sit amet iaculis odio. Pellentesque tempor urna eu velit laoreet volutpat.

Column Structures

There are three classes: "one-column", "two-column" and "three-column" that can be applied to tags such as <p> and <div>. This basic paragraph text has the class "one-column" which enables it to span the full width of the column. By default, the post text is given this same column layout. Below are some examples of the useful classes which allow for varied column structures.

Two-column

This text has the class "two-column" and obviously is split over two columns. Nunc ac nunc erat, sit amet iaculis odio. Pellentesque tempor urna eu velit laoreet volutpat. Maecenas facilisis ante nec sem congue nec gravida lorem lacinia. Curabitur condimentum leo at mi lobortis etam mordor.

Three-column

This text has the class "three-column" and is split into three even columns. Nunc ac nunc erat, sit amet iaculis odio. Pellentesque tempor urna eu velit laoreet volutpat. Maecenas facilisis ante nec sem congue nec gravida lorem lacinia. Proin tristique condimentum neque, sit amet congue tellus fermentum eu. Suspendisse laoreet, metus eu eleifend. Curabitur condimentum leo at mi lobortis etam mordor.

The Columnist has a strong emphasis on typography. It uses an exponential formula for text hierarchy and the greatness of Helvetica along with column layouts and newspaper theme.

So, is there something I missed? Go ahead and let me know →

  • Date: 25th April
  • Time: 5:30pm
  • Price: $12.50 per person
  • RSVP: 23rd January
  • Photo: PubActuelle

Posted in Typography

9 Comments

Tagged with , , ,

9 Comments

  1. [...] You can easily insert images into your posts by using the regular "" tag. Your image is automatically re-sized in relation to the column structure in use. To learn more about defining the post column structure you can check out the ‘Text style’ post. [...]

  2. [...] can find The Columnist theme support and help documentation for topics such as: Adding images, Text styles, Downloading and installing, Video posts, The making of and Version [...]

  3. Nice post and this fill someone in on helped me alot in my college assignement. Thanks you as your information.

  4. cybernorn says:

    it was very interesting to read.
    I want to quote your post in my blog. It can?
    And you et an account on Twitter?

  5. myish says:

    Hi how do you put that vertical line at “The Columnist has a strong emphasis on typography.”…

  6. domingo says:

    Hi, I’m from Spain, sorry for my bad english. Great theme!!!! It is possible to have the theme centered, no left aligned?

  7. Joe says:

    hello,
    how do you implement the horizontal lines in the post?

    Thanks,
    Joe

  8. Joe says:

    also, how do you have the lines on the post info for example, in between the date, tags, etc

    Thanks

  9. Benji says:

    @Myish @Joe the vertical line is a blockquote treatment and can be found in the post editor.

Show some love:

News

The Columnist is a grid based wordpress theme. It features a newspaper column layout, neat typographic heirarchy, a tidy grid system and some css3 & jQuery greatness.

Continue reading →

View all

Images

The Columnist theme is extremely flexible with images and supports the latest Wordpress image functionality. It features custom fields to display various sized images and thumbnails to support each article.

Continue reading →

View all

Videos

Keith Loutit’s awesome tilt-shift time-lapse clip of Tamarama Beach, Sydney, on the first warm weekend of the year.

Continue reading →

View all

Design

The Columnist is inspired by grid structures, Helvetica, jQuery, Wordpress, photography, minimalism and the interwebs!

Continue reading →

View all

Typography

The Columnist has a strong emphasis on typography. It uses an exponential formula for text hierarchy and the greatness of Helvetica along with column layouts and newspaper theme.

Continue reading →

View all

Installation

This post demonstrates the step-by-step process to installing The Columnist Wordpress theme and applying it to your blog or website.

Continue reading →

View all

Mentions

General mentions, mumbles and some examples of people repping The Columnist theme.

Continue reading →

View all

Versions

The latest and greatest version of The Columnist Wordpress theme is ready and waiting for you.

Continue reading →

View all