webmasters_by September 14, 2012 at 00:17

Creative use of web fonts

Transfer

With CSS magic, we can create beautiful typographic effects and forget about using images, in most cases. In this article, we will create a series of nice examples of web typography using the jQuery plugin - lettering.js, as well as various CSS tricks. In some examples, we will also add hover transitions to make them a bit more interactive.
Please note: examples will only work in browsers that support the corresponding CSS properties.

Also, we will not include browser prefixes in the code examples in the article, but you can find them in the source. In most cases, we will use the lettering.js plugin.
So, let's move on to the examples, there will be eight in total.

Example 1

The idea of the first example is to split or cut a word when you hover over it and at the same time show a second word that is hidden. To do this, we need the following html markup:

ОблакоСолнцеОблако

The word that will be displayed first will be duplicated. (Note that all these examples are intended more for decorative purposes).

We will use the lettering.js plugin for words, i.e. we will have another span tag around the first and last word (duplicates):

$(".cs-text-cut").lettering('words');

Now let's take a look at the styles. First of all, we will set a fixed width for the block with text:

.cs-text {
    width: 645px;
    margin: 120px auto 30px;
    cursor: default;
}

First level span tags will be displayed as block elements:

.cs-text > span {
    display: block;
}

Two spans with the class ".cs-text-cut" will have a height of 90px and we will set overflow: hidden. The idea is that the height of this span is half its real height, so we cut the text into half. Also add a transition for these elements:

.cs-text-cut {
    width: 100%;
    height: 90px;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

Now add the borders above and below:

.cs-text-cut:first-child {
    border-top: 1px solid rgba(255,255,255,0.5);
}
.cs-text-cut:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

Then set the font size and line height of the internal span tag to 180px, which is exactly two times the height of its parent, and also add some styles for the text:

.cs-text-cut span {
    display: block;
    line-height: 180px;
    color: rgba(255,255,255,1);
    font-size: 180px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    margin-top: 6px;
    font-family: 'Sancreek', cursive;
    text-shadow: 7px 2px 0 rgba(255,255,255,0.3);
}

The second duplicate word, which is the last child in our structure, will be a little “raised”. Thus, we will only see the bottom of the word:

.cs-text-cut:last-child span {
    margin-top: -84px;
}

The text in the middle that we want to appear when you hover over the mouse will be positioned absolutely, and we will set the transparency for it to 0. It will also be halved:

.cs-text-mid {
    font-family: 'Raleway', sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 50px;
    letter-spacing: 50px;
    line-height: 50px;
    text-indent: 20px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    color: rgba(255,255,255,0.3);
    text-shadow: 0 0 0 rgba(255,255,255,0.9);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s ease-in-out 0s;
}

When we hover over the word, we want the upper half to move up, so we will move it along the Y-axis and reduce its transparency:

.cs-text:hover .cs-text-cut:first-child {
    transform: translateY(-25px);
    opacity: 0.5;
}

And the lower half will be moved down:

.cs-text:hover .cs-text-cut:last-child {
    transform: translateY(25px);
    opacity: 0.5;
}

And finally, we will change the transparency for the middle text and increase it. Please note that we added a transition with a delay of 0.3 seconds. This will give us time to first move the halves of the original word up and down:

.cs-text:hover .cs-text-mid {
    transition-delay: 0.3s;
    opacity: 1;
    transform: scale(1);
}

So with the first example we are done. Let's move on to the second.

Example 2

In the second example, we will play a little with the transformation and create translucent panels with letters.

Капля

We will use lettering to wrap each letter in a span:

$("#cs-text").lettering();

Then give the main shell a fixed width and add a clearfix hack from Nicolas Gallagher , because our span tags will be floating (float: left):

.cs-text {
    width: 600px;
    margin: 70px auto 30px;
}
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
    content: " ";
    display: table;
}
.cs-text:after {
    clear: both;
}
/* end clearfix hack */

Each span will have a wrap on the left and we will also add a translucent background and a box-shadow property that will create a wide border. Then we “tilt” the element (transform: skewY (8deg)) and add a transition:

.cs-text span {
    float: left;
    width: 120px;
    font-size: 120px;
    line-height: 230px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    cursor: default;
    font-family: 'Medula One', cursive;
    display: block;
    z-index: 1;
    position: relative;
    color: rgba(255,255,255,0.7);
    text-shadow: 5px 5px 2px rgba(0,0,0,0.5);
    background: rgba(0,0,0,0.05) url(../images/scratch-texture.png);
    box-shadow:
        -6px 2px 10px rgba(0,0,0,0.5),
        inset 0 0 0 20px rgba(255, 255, 255, 0.4);
    border-radius: 5px;
    transform: skewY(8deg);
    transition: all 0.5s ease-in-out;
}

We will use the: before pseudo-class in order to create the effect of the inner shadow. There are other ways to do this, but let's think a little bit :)

.cs-text span:before {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    bottom: 20px;
    box-shadow:
        1px 1px 1px rgba(255,255,255,0.4),
        inset 1px 1px 1px rgba(0,0,0,0.1);
}

Using the: after pseudo-class, add a small dot at the top of the element:

.cs-text span:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 5px;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 1px 1px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.2);
}

And finally, when you hover over the mouse, we will rotate the element and increase it slightly, also change the shadows and increase the transparency value:

.cs-text span:hover {
    transform: translateY(-10px) scale(1.1);
    color: rgba(255,255,255,1);
    text-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}

Example 3

The third example is based entirely on the lesson on creating scratched tiles in Photoshop from textuts.com. And we will try to create exactly the same effect using CSS.

Я вас любил: ♥любовь еще, быть может, В душе моей угасла не совсем, Но пусть она вас больше не тревожит, Я не хочу печалить вас ничем.
АС Пушкин

We will again apply lettering.js to words and letters:

$(".cs-text").lettering('words').children('span').lettering()

This will allow us to wrap each word in a span tag with a class starting with the word “word” and each letter in a word in a span with a class starting with the word “char”.

Let's center the text:

.cs-text {
    text-align: center;
    margin-top: 70px;
}

Words will be displayed as inline blocks and we will give them side padding:

.cs-text span[class^="word"] {
    display: inline-block;
    margin: 0 15px;
}

For each character, we will define the background color, width and height. The shadow text will create the effect of embedded letters, and a few box-shadow shadows will add volume to the tile:

.cs-text span[class^="char"] {
    width: 90px;
    height: 100px;
    display: inline-block;
    background: #e4d095;
    color: #2a1f1b;
    border-radius: 4px;
    font-size: 60px;
    font-weight: 400;
    line-height: 100px;
    margin: 10px 3px;
    text-align: center;
    cursor: default;
    font-family: "Spinnaker", Arial, sans-serif;
    text-shadow:
        1px 1px 1px rgba(255, 255, 255, 0.9),
        0 -1px 1px rgba(255,255,255,0.2);
    text-transform: uppercase;
    box-shadow:
        1px 7px 15px rgba(0,0,0,0.8),
        inset 3px 0 2px rgba(255,255,255,0.4),
        inset 0 3px 0px rgba(255,255,255,0.5),
        inset -2px -3px 0px rgba(143,128,82,0.6);
}

Now add a little “randomness”, turning slightly every odd and every third tile:

.cs-text span[class^="char"]:nth-child(odd) {
    transform: rotate(2deg);
}
.cs-text span[class^="char"]:nth-child(3n) {
    transform: rotate(-3deg);
}

The fifth word and the last heading will have red letters, and the heading will be slightly smaller than the rest of the text:

.cs-text > span:nth-child(5) span,
h3.cs-text span[class^="char"] {
    color: #a62a19;
}
h3.cs-text span[class^="char"] {
    font-size: 40px;
    width: 50px;
    height: 60px;
    line-height: 60px;
}

All is ready!

Example 4

In the fourth example, we use text as a background with a typographic effect. We will make the letters large and translucent, add shadows for the text, and rotate some of the letters in a “random” way.

Не завидуй 
				тому, кто силен и богат. 
За рассветом всегда 
наступает закат.
С этой жизнью короткою, 
равною вздоху,
Обращайся как с 
данной тебе напрокат.

We will wrap each letter in a span tag, using the same lettering.js:

$("#cs-text").lettering();

Center the text and set it to 100% width:

.cs-text {
    width: 100%;
    text-align: center;
    margin-top: 80px;
}

The letters will be translucent, for this we define an RGBA color with a low transparency value. We will also add a shadow for the text with a large offset:

.cs-text span {
    font-family: 'Cantata One', 'Trebuchet MS', sans-serif;
    font-size: 180px;
    line-height: 150px;
    font-weight: 400;
    color: rgba(255,255,255,0.3);
    display: inline-block;
    text-transform: uppercase;
    text-shadow: 15px 15px 0 rgba(0,0,0,0.2);
    cursor: default;
    pointer-events: none;
}

Since we want to use this as a background, we add the pointer-events: none property. This will avoid highlighting the text with the mouse.

Now, let's randomly rotate and change some letters. To do this, we will use the: nth-child selector:

.cs-text span:nth-child(2n) {
    transform: rotate(-6deg);
    color: rgba(255,255,255,0.4); ;
}
.cs-text span:nth-child(3n) {
    transform: translateY(20px);
}
.cs-text span:nth-child(4n) {
    color: rgba(255,255,255,0.2);
}
.cs-text span:nth-child(3n+3) {
    transform: scale(1.4) rotate(5deg);
}
.cs-text span:nth-child(7n) {
    font-size: 110px;
}
.cs-text span:nth-child(12n) {
    font-size: 200px;
}

That's all, a very simple but impressive text effect.

Example 5

In Example 5, create a 3D effect.

Гармошка

Here we want each letter to be wrapped with two span tags, so we will first apply lettering.js and then wrap the created span tags in one more:

$("#cs-text").lettering().children('span').wrap('');

Define the width / height and padding for the main container:

.cs-text {
    position: relative;
    width: 960px;
    height: 100px;
    margin: 100px auto;
    cursor: default;
}

The first layer of span tags will have perspective and float properties:

.cs-text > span {
    perspective: 200px;
    float: left;
    position: relative;
}

Since we will rotate and move the internal span tags, we need to arrange the containers in a certain order (from the center to the edges):

.cs-text > span:first-child,
.cs-text > span:last-child {
    z-index: 1;
}
.cs-text > span:nth-child(2),
.cs-text > span:nth-child(7){
    z-index: 2;
}
.cs-text > span:nth-child(3),
.cs-text > span:nth-child(6){
    z-index: 3;
}
.cs-text > span:nth-child(4) {
    z-index: 5;
}
.cs-text > span:nth-child(5){
    z-index: 4;
}

Internal spans will have multiple backgrounds: gradient and translucent textures. We will also apply box-shadow, which will give some depth to the elements:

.cs-text span span {
    display: block;
    background: url(../images/scratch-texture.png), linear-gradient(to right, #00b7ea 0%,#009ec3 100%);
    box-shadow:
        -1px 0 2px rgba(255,255,255,0.4),
        -2px 0 0 #00adda,
        -2px 7px 9px rgba(0, 0, 0, 0.5);
    color: #fff;
    text-shadow: -1px -1px 2px rgba(0,0,0,0.6);
    width: 120px;
    height: 150px;
    font-weight: 700;
    line-height: 150px;
    font-size: 140px;
    text-align: center;
    text-transform: uppercase;
}

The last four letters will have an inverse gradient, box-shadow and text-shadow:

.cs-text > span:nth-child(n+5) span {
    background: url(../images/scratch-texture.png), linear-gradient(to right, #009ec3 0%,#00b7ea 100%);
    box-shadow:
        1px 0 2px rgba(255,255,255,0.4),
        2px 0 0 #00adda,
        -2px 7px 9px rgba(0, 0, 0, 0.5);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}

Now we will move the internal spans by the Z-index and we will rotate them to create the desired effect. Each of them will have different values, so we will use the: nth-child selector:

.cs-text > span:nth-child(4) span{
    transform: translateZ(40px) rotateY(40deg);
}
.cs-text > span:nth-child(5) span{
    transform: translateZ(40px) rotateY(-40deg);
}
.cs-text > span:nth-child(3) span{
    transform: translateZ(30px) rotateY(30deg);
}
.cs-text > span:nth-child(6) span{
    transform: translateZ(30px) rotateY(-30deg);
}
.cs-text > span:nth-child(2) span{
    transform: translateZ(20px) rotateY(20deg);
}
.cs-text > span:nth-child(7) span{
    transform: translateZ(20px) rotateY(-20deg);
}
.cs-text > span:first-child span{
    transform: translateZ(10px) rotateY(10deg);
}
.cs-text > span:last-child span{
    transform: translateZ(10px) rotateY(-10deg);
}

Also move the spans a bit along the x axis:

.cs-text > span:nth-child(-n+4) {
    transform: translateX(14px);
}
.cs-text > span:nth-child(n+5) {
    transform: translateX(-14px);
}

Done, now we have a neat 3D text!

Example 6

Origami inspired me to this example. For each letter, we will have several translucent spans that we will rotate and “tilt”. When you mouse over, all transformations will be deleted.

Роза

We need to wrap each letter with a span tag, before which there will be three empty span tags, and all this will be wrapped with another span tag (yes, you can break the brain):

$("#cs-text").lettering().children('span').wrap('').parent().prepend('');

Add the width and some padding for the main container:

.cs-text {
    width: 600px;
    margin: 70px auto 30px;
}
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
    content: " ";
    display: table;
}
.cs-text:after {
    clear: both;
}
/* end clearfix hack */

All span tags will be block elements:

.cs-text span{
    cursor: default;
    display: block;
    position: relative;
}

The first span layer will have a height and width of 130 pixels and some indents:

.cs-text > span {
    float: left;
    width: 130px;
    height: 130px;
    margin: 10px;
}

All internal spans will have an RGBA background that will make them translucent. We will also add a transition for them:

.cs-text span span {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.3);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out;
}

The last child inner span contains a letter, specify a size for it and add some color shadows for the text. It will also have a background gradient that will simulate a subtle bend:

.cs-text span span:last-child{
    font-size: 70px;
    line-height: 130px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    color: rgba(255,255,255,0.8);
    font-family: 'Michroma', sans-serif;
    text-shadow:
        1px 1px 1px rgba(0,0,0,0.1),
        -1px -1px 1px rgba(0,0,0,0.1),
        5px 5px 0 rgba(216,65,40,0.6),
        -5px -5px 0 rgba(37,166,164,0.6);
    background:
        linear-gradient(
            45deg,
            rgba(249,249,249,0.08) 0%,
            rgba(234,234,234,0.5) 49%,
            rgba(255,255,255,0.51) 50%,
            rgba(244,244,244,0.94) 100%
            );
}

Now add some arbitrary twists and turns for spans:

.cs-text > span:nth-child(odd) span:first-child {
    transform: rotate(5deg) skewY(-14deg);
}
.cs-text > span:nth-child(even) span:first-child {
    transform: rotate(-35deg) skewY(-5deg);
}
.cs-text > span:nth-child(odd) span:nth-child(2) {
    transform: rotate(45deg) skewY(-10deg);
}
.cs-text > span:nth-child(even) span:nth-child(2) {
    transform: rotate(27deg) skewY(-12deg);
}
.cs-text > span:nth-child(odd) span:nth-child(3) {
    transform: rotate(45deg);
}
.cs-text > span:nth-child(even) span:nth-child(3) {
    transform: rotate(30deg);
}

When you hover, we will remove all transformations for blocks:

#cs-text > span:hover span {
    transform: rotate(0deg) skewY(0deg);
    text-shadow:
        1px 1px 0 rgba(216,65,40,0.1),
        -1px -1px 0 rgba(37,166,164,0.1);
}

The sixth example is ready! There are many more variations of this example, just try playing around with transforms to create interesting effects.

Example 7

In this example, we initially show the logo, and then, when you hover over the mouse, we show all the other letters. We will not use the lettering plugin here, we just create the following structure:

Codrops

First we define some text properties:

.cs-text {
    font-size: 50px;
    text-transform: uppercase;
    margin: 80px auto 0 auto;
    width: 580px;
    height: 100px;
    padding-left: 20px;
    font-family: 'McLaren', Arial;
    font-weight: 400;
    position: relative;
}
/* Micro clearfix hack by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/ */
.cs-text:before,
.cs-text:after {
    content: " ";
    display: table;
}
.cs-text:after {
    clear: both;
}
/* end clearfix hack */

Span tags will have the float: left property, and we will make them round. We will also add a transition.

.cs-text span {
    cursor: default;
    display: block;
    float: left;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 0 0 0 -20px;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
    transition: all 0.4s ease-in-out;
}

For even and odd span tags there will be a different background color and we will add a subtle texture for them:

.cs-text span:nth-child(odd) {
    background: rgba(118,176,204, 0.8) url(../images/noise.png);
}
.cs-text span:nth-child(even) {
    background: rgba(58,126,162, 0.8) url(../images/noise.png);
}

All spans will be moved to the center. We will apply the transformation twice: the first time in percent, for example, the first span needs to be moved 3 positions, i.e. 300%, and the second conversion to compensate for indentation:

.cs-text span:nth-child(1) {
    transform: translate(300%) translate(-60px);
}
.cs-text span:nth-child(2) {
    transform: translate(200%) translate(-40px);
}
.cs-text span:nth-child(3) {
    transform: translate(100%) translate(-20px);
}
.cs-text span:nth-child(5) {
    transform: translate(-100%) translate(20px);
}
.cs-text span:nth-child(6) {
    transform: translate(-200%) translate(40px);
}
.cs-text span:nth-child(7) {
    transform: translate(-300%) translate(60px);
}

All spans except the last will have transparency equal to 0:

.cs-text span:not(:last-child) {
    opacity: 0;
    pointer-events: none;
}

The last span will contain the logo. We will give it a different background and position it in the center of the main container:

.cs-text span:last-child{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50px;
    z-index: 100;
    background: url(../images/codrops_logo.jpg) no-repeat center center;
}

When you hover the mouse, all spans will return to their natural position, and we will increase the transparency value to 1:

.cs-text:hover span:not(:last-child){
    transform: translate(0%);
    opacity: 1;
}

The logo will be slightly enlarged and then disappear:

.cs-text:hover span:last-child {
    opacity: 0;
    transform: scale(1.4);
}

Example 8

In the last example, we'll just play a little with a few shadows for the text.

 Время для кофе

We again use lettering.js to wrap all words in span tags:

$(".cs-text").lettering('words');

Add a width for the main title and center it. We will also tilt it a bit:

.cs-text {
    width: 660px;
    margin: 120px auto 30px;
    cursor: default;
    transform: skewY(-12deg);
    text-align: center;
}

Let's make span tags block elements, and add the top field:

.cs-text span {
    display: block;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    margin-top: 6px;
    font-family: 'Stint Ultra Expanded', cursive;
}

The first word will have a font size of 100 pixels, and a large distance between the letters:

.cs-text span:first-child {
    font-size: 100px;
    letter-spacing: 96px;
    text-shadow: 6px 6px 0px rgba(255,255,255,0.3);
}

The second word will be in italic serif typeface, and we will set it in a dark color:

.cs-text span:nth-child(2) {
    font-family: Georgia, serif;
    font-weight: 400;
    text-transform: none;
    font-style: italic;
    line-height: 60px;
    font-size: 67px;
    color: #392f2c;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    position: relative;
}

We use the: before and: after pseudo-classes to create two lines on the left and right:

.cs-text span:nth-child(2):before,
.cs-text span:nth-child(2):after {
    content: '';
    width: 240px;
    height: 2px;
    background: #392f2c;
    position: absolute;
    top: 50%;
    margin-top: -1px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.cs-text span:nth-child(2):before {
    left: 0px;
}
.cs-text span:nth-child(2):after {
    right: 0px;
}

The last word will have several shadows for the text to create the effect of a stack of letters. The trick is to alternate the text color with the background color, which in our case is dark brown:

.cs-text span:nth-child(3) {
    font-size: 130px;
    text-shadow:
        2px 2px 0 #645f59,
        4px 4px 0 #fff,
        6px 6px 0 #645f59,
        8px 8px 0 #fff,
        10px 10px 0 #645f59,
        12px 12px 0 #fff,
        14px 14px 0 #645f59,
        16px 16px 0 #fff,
        18px 18px 0 #645f59,
        20px 20px 0 #fff,
        22px 22px 0 #645f59,
        24px 24px 0 #fff;  
}

And that’s all! I hope you enjoyed these examples and find them useful! You can experiment a lot with them, so try it!

Demo

Download Source Files

Tags:

Creative use of web fonts

Example 1

ОблакоСолнцеОблако

Example 2

Капля

Example 3

Я вас любил: ♥любовь еще, быть может, В душе моей угасла не совсем, Но пусть она вас больше не тревожит, Я не хочу печалить вас ничем.

АС Пушкин

Example 4

Не завидуй тому, кто силен и богат. За рассветом всегда наступает закат. С этой жизнью короткою, равною вздоху, Обращайся как с данной тебе напрокат.

Example 5

Гармошка

Example 6

Роза

Example 7

Codrops

Example 8

`Время для кофе`

Also popular now: