Text styling inspiration

09.07.2013 by Ilia Raiskin
Walkthrough Design Typography

Info

In this walkthrough I'll show you examples of text styling. Maybe some of the examples can help and inspire you. Note that I use a lot of placeholder text in this walkthrough.

Add drop caps

Terminal gravity gravity hop back. hydrometer racking malt aau top-fermenting yeast hop back. wort pitching priming? dunkle brewing brewing racking real ale. conditioning dunkle. top-fermenting yeast aau, " alcohol, wheat beer glass." bung mead top-fermenting yeast barley hops pilsner; microbrewery, heat exchanger.

caramel malt trappist, wit seidel. finishing hops adjunct tulip glass grainy? pitch, " enzymes berliner weisse length," barley brew. wort chiller mash tun balthazar cask conditioned ale: mead. dunkle hop back brew top-fermenting yeast pub ibu wort chiller malt ibu. dry hopping grainy infusion pint glass mouthfeel lambic, ester. abbey, ibu lauter tun mash alcohol?

Code

Note that this code is not compatible with IE9-. If you want it to work for older Internet Explorer versions you need additional markup:

CSS code

/*CSS code for newer browsers*/
p:first-of-type::first-letter {
float: left;
color: #2A76C9;
font-size: 63px;
line-height: 60px;
padding-top: 0px;
padding-right: 8px;
padding-left: 3px;
font-family: Baskerville;
font-weight: bold;
}

/*CSS code for older IE's*/
p.first-p div.first-letter{
float: left;
color: #2A76C9;
font-size: 63px;
line-height: 60px;
padding-top: 0px;
padding-right: 8px;
padding-left: 3px;
font-family: Baskerville;
font-weight: bold;
}

Highlight the first line

Terminal gravity gravity hop back. hydrometer racking malt aau top-fermenting yeast hop back. wort pitching priming? dunkle brewing brewing racking real ale. conditioning dunkle. top-fermenting yeast aau, " alcohol, wheat beer glass." bung mead top-fermenting yeast barley hops pilsner; microbrewery, heat exchanger.

CSS code

p::first-line {
color: rgb(54, 69, 129);
font-weight: bold;
}

Add borders and padding to important paragraphs

Terminal gravity gravity hop back. hydrometer racking malt aau top-fermenting yeast hop back. wort pitching priming? dunkle brewing brewing racking real ale. conditioning dunkle. top-fermenting yeast aau, " alcohol, wheat beer glass." bung mead top-fermenting yeast barley hops pilsner; microbrewery, heat exchanger.

caramel malt trappist, wit seidel. finishing hops adjunct tulip glass grainy? pitch, " enzymes berliner weisse length," barley brew. wort chiller mash tun balthazar cask conditioned ale: mead. dunkle hop back brew top-fermenting yeast pub ibu wort chiller malt ibu. dry hopping grainy infusion pint glass mouthfeel lambic, ester. abbey, ibu lauter tun mash alcohol?

Aroma hops shelf life brew pitching, " biere de garde." trappist barley, terminal gravity brewpub brew kettle. Aroma hops shelf life brew pitching, " biere de garde." trappist barley, terminal gravity brewpub brew kettle.

HTML Code

CSS code

p.important-p {
border: 4px solid rgb(243, 243, 243);
padding: 20px;
}

Add extra styles to every second paragraph

Terminal gravity gravity hop back. hydrometer racking malt aau top-fermenting yeast hop back. wort pitching priming? dunkle brewing brewing racking real ale. conditioning dunkle. top-fermenting yeast aau, " alcohol, wheat beer glass." bung mead top-fermenting yeast barley hops pilsner; microbrewery, heat exchanger.

caramel malt trappist, wit seidel. finishing hops adjunct tulip glass grainy? pitch, " enzymes berliner weisse length," barley brew. wort chiller mash tun balthazar cask conditioned ale: mead. dunkle hop back brew top-fermenting yeast pub ibu wort chiller malt ibu. dry hopping grainy infusion pint glass mouthfeel lambic, ester. abbey, ibu lauter tun mash alcohol?

Aroma hops shelf life brew pitching, " biere de garde." trappist barley, terminal gravity brewpub brew kettle. Aroma hops shelf life brew pitching, " biere de garde." trappist barley, terminal gravity brewpub brew kettle.

Terminal gravity gravity hop back. hydrometer racking malt aau top-fermenting yeast hop back. wort pitching priming? dunkle brewing brewing racking real ale. conditioning dunkle. top-fermenting yeast aau, " alcohol, wheat beer glass." bung mead top-fermenting yeast barley hops pilsner; microbrewery, heat exchanger.

HTML Code

CSS code

p:nth-child(odd) {
padding: 20px;
background: rgb(250, 250, 250);
}

Change the styles for <strong>

Terminal gravity gravity hop back. hydrometer racking malt aau top-fermenting yeast hop back. wort pitching priming? dunkle brewing brewing racking real ale. conditioning dunkle. top-fermenting yeast aau, " alcohol, wheat beer glass." bung mead top-fermenting yeast barley hops pilsner; microbrewery, heat exchanger.

HTML Code

CSS code

p strong {
color: rgb(78, 78, 78);
background: rgb(190, 190, 190);
font-weight: bold;
}



About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.






Comment