Tangled in Design Branding Decoration

Tangled in Design is the work of Stephen Greig, currently a Web Designer/Front-end guy in Nottingham, UK.

Read more about Stephen

I wrote a book on advanced CSS3, published by John Wiley & Sons. You should totally buy it…

Buy my book: CSS3 Pushing the Limits

Tangled in Design is the work of Stephen Greig, currently a Freelance Web Designer/Front-end guy in Nottingham, UK.

Stephen specialises in design and front-end development, notably HTML5 & semantics, scalable CSS, along with particular expertise in the experimental, cutting edge CSS3 modules.

Stephen's been in the industry as a full-time professional for over 5 years, during which he has graduated with a First Class BA Honours degree, written a 380 page book on advanced CSS3 and held Senior positions in both New Zealand and South Wales.

He has since moved back to his home in Nottingham where he now works as a Senior Web Designer.

Stephen loves sports and is a keen follower of Hereford FC as well as the Welsh Rugby Union and Football teams.

He also has a deep passion for music and boasts an extremely varied taste, as is evident by his last.fm profile.

He also likes swearing and thinks that talking in third person is cool as fuck.

Want to know more? Tweet me. I'm nice.

Slide Back

Using first-line and first-letter to draw users into your copy

Tweet

First Line and First Letter Blocks of copy can often appear intimidating and overwhelming to us humans, being the instinctively lazy species that we are. Subsequently, we’re always striving to make the text on our websites more friendly, more appealing and ultimately to increase its readability. It’s a difficult practise, but there are a number of ways we try to control the readability of our copy.

The way we design a website in terms of layout helps us to control and manage the readability of our copy, as it houses the text and attempts to present it in the best way possible.

There are several other ways we try to control the readability of our text, from size and colour to line height and letter spacing, but the fact is large areas of text are often still uninviting and hard to entice your average user with, despite utilising all of the best usability practises.

Extra Styling

Another little trick to break down the barrier between your copy and your users is to add some extra styling to the opening section of the text; namely the first line, first letter and/or first word(s).

This technique may not have your words being consumed by all who come across them, but it could go some way to tying your copy in with the design of the website and therefore considerably breaking down the barrier between the user and them actually starting to read the text.

Having the first few words stand out from the rest of the text will attract attention and draw the user into them, encouraging the user to start reading and making it more likely that they will read on.

Pseudo-Selectors

Thanks to CSS, we can utilise this technique quite easily using pseudo-selectors to target these areas, without having to add any ugly tags to our markup.

And the best thing is, they both work across the board, in all major browsers! Yes, even IE6!

Browser Support

Note: Pseudo-elements should be implemented with a double colon (::first-line) as opposed to pseudo-classes which should use a single colon (:first-child), but older versions of IE fail to recognise the double colon usage, which is why I tend to stick with a single colon.

We’re going to be looking at a few examples of how we can use these pseudo-selectors to add that little something extra to our website’s copy.

You may have noticed that there is no pseudo-selector for first-word in CSS, so we’re going to have to use our imagination for this; we’ll be going through our options later on in this article.

First-line

The beauty of pseudo-selectors is that they ensure we don’t have to touch our markup to add unnecessary tags and classes. All the work is done in the CSS.

And it couldn’t be simpler…

p:first-line {
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:0.1em;
}

This selector allows us to target part of an element that has no place in the actual document tree, which is why we refer to it as a pseudo-element.

Now we have a first line that stands out from the rest of our text, offering us an introduction into our paragraph.

first-line

That’s fine in theory, but what happens when we add a few more paragraphs into our copy?

first-line

Not really what we wanted is it? Ideally, we just want the first line of our first paragraph to stand out, not the first line of every paragraph!

We could use p:first-child:first-line, but for this to work, the <p> would need to be the first child of its container, which is unlikely given that most blocks of text are superseded with a heading of some sort.

In this case, we can use p:first-of-type:first-line. This ensures that only the first line of the very first paragraph is styled, no matter what comes before the first paragraph in the markup.

First-letter

No prizes for guessing what’s coming next. Unsurprisingly, it’s exactly the same method as the above. The basic usage is simply p:first-letter, but taking into account multiple paragraphs, we use the below snippet to target only the first paragraph…

p:first-of-type:first-letter {
    font-size:4.5em;
    font-weight:normal;
    letter-spacing:0;
    line-height:1.2em;
    border:1px dashed #999;
    padding:0 17px;
    margin-right:5px;
}

Simply styling one letter differently to the rest of the text can really draw attention to the block of text and encourage the user to read it.

first-letter

View Demo

First Word

Earlier we touched upon the fact that there is no pseudo-selector to style the first word of a paragraph for whatever reason. So unfortunately, we have to go a bit more old-school with this one.

Basically, there are 2 [front-end] options open to us.

If you’re working on a relatively small and maintainable site, then it’s probably easier to just add a <span> tag in where you need it. This method is easier and allows you more control over what you target i.e. if it was more appropriate to style the first few words rather than just the first, you could simply shift the closing tag. Easy peasy.

However, it’s often the case that the content being added isn’t so accessible, or it’s simply impractical to manually add bits of code into the copy. For example, it may be that a client is adding the content to the site through a CMS, in which case it wouldn’t be reasonable to rely on them to add <span> tags where necessary. This is where a JavaScript solution would be the more sensible option.

Whichever method you choose to use should simply be based on the needs of your project and which would be the easiest to implement and the easiest to maintain.

To wrap up, styled well these subtle pseudo elements can be very effective in transforming a boring block of text into something that is inviting and appealing to the eye.

About Stephen Greig

Stephen Greig is a 25 year old Freelance Web Designer/Front-end guy, currently living in Nottingham, UK. Stephen is also the creator of messivsronaldo.net and author of CSS3 Pushing the Limits, a book on advanced CSS3. You should follow him on Twitter where he talks about the web, sports, music and swears a lot. Stephen's also on Google+ if that's more your bag.