CSS: Positioning + Typography

Page Layout

I came across a designer’s personal site and was initially interested in the typography. But as I dug down into the CSS, I found that the split-screen layout is relatively simple. The following is basically how it breaks down:

The page is broken into two sections – one for left/right.

  • top: 0; Left: 0; position: absolute; width: 50%; height: 100%;

Each section has a div class of “box”

  • position: relativel width: 100%; Height: 100% padding: 50%

Within the box is an image class with the author image

  • float: none; display: block; clear: both; width: 146px; margin: 120px auto 20px auto;

Finally, the typography. The larger typography is an h2 class of Playfair Display type like this:

CSS type

The byline typography is a span class  that looks like this:

CSS type

Overall, this is fairly simple CSS to use to position elements and typography on a page. The site also uses subtle animation that adds interactivity and direction to the user. The layout is unique and I think is a clever solution to display this content.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s