Posted by & filed under css.

Playing with web typography and CSS selectors. Adding “special” effects to text such us different style for first paragraph, drop caps in first paragraph and using columns, without adding any additional class to HTML markup. Here are some examples to use CSS selectors in web typography. Zip file with samples included in the end of post.

HTML markup

The same HTML was used for all examples.

<article>
    <h2>Title</h2>
    <p>Lorem ipsum dolor sit amet ...</p>
    <p>Qui eros splendide cotidieque ex, ...</p>
    <p>Vis eu amet labore mandamus ...</p>
</article>

And the CSS for common font sizes used:

html, body {
    font-family: "PT Sans";
    font-size: 16px;
    line-height: 21px;
}

Different style of first paragraph

first paragraph style

article p:first-of-type {
    font-style: italic;
    font-family: "PT Serif";
}

Well, the #example p:first-child can not be used, as the p element is not following directly the div but there is h2 after it.

Drop caps in the paragraph

drop cap css

article p:first-of-type:first-letter {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 44px;
    font-family: "PT Serif";
    float:left;
    margin-top: 9px;
    padding-right: 2px;
}

Column layout

So, I want to show the text in three columns, make indents on paragraphs, enable hypernation to avoid weird spacing on fully justified text and make a drop cap in first paragraph.

css columns

/*3 columns layout with 40px gap between*/
article {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
    -moz-column-gap:40px; 
    -webkit-column-gap:40px; 
    column-gap:40px;
}
/*Justifying the text in paragraphs, adding the first line text indent and enable hypernation. Hypernation works only in Firefox, Safari and IE*/
article p {
    text-indent: 25px;
    margin:0;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
}
/*Don't want the text indent on first paragraph as we will put drop cap there*/
article p:first-of-type {
    text-indent: 0;
}
/*Drop cap in first paragraph*/
article p:first-of-type:first-letter {
    font-size: 44px;
    float: left;
    margin-top: 12px;
}
/*Title to break over all columns*/
article h2 {
    column-span:all;
    -webkit-column-span:all;
    -moz-column-span:all;
}
/*Justifying the margin of the first paragraph*/
article p:first-of-type {
    margin-top: 0px;
}

Styling first line in paragraph

Styling first line in paragraph is easy as there is a :first-line selector and pseudo-element, so the style changes can be easily applied. But there is no the first-word pseudo-element, so it can be styled by adding additional markup in HTML or with the help of JavaScript.

first-line

article p:first-of-type:first-line {
    font-size: 18px;
    letter-spacing: 2px;
    font-style: italic;
}