CSS & Web fonts

Typecast competition

As part of the events for the Build conference Typecast, one of the sponsors, set up a typography contest for anybody to enjoy.

Typecast competition entry for Build conference

The rules are easy, pick one of three quotes from past Build conferences and let your typography inspiration run wild using HTML, CSS and web fonts.

This is my entry.

The web fonts are by Typekit. Some of the fancy typesetting is helped along with lettering.js.

We put
so much
of ourselves
into
these
things

But they're
just
things

Wilson Miner

css

									
										
.typecast {
	text-align: center;
	background: #f8f7f0; /* almond */
}

.typecast__inside {
	width: 40em; 
	margin: 3em auto;
	text-align: left;
	padding: 1em 0;
}

.typecast blockquote:before {
	display: none;
}

.typecast blockquote {
	margin: 2em 0;
	font-family: "futura-pt", Helvetica, sans-serif;
	text-align: center;
	color: #f8f7f0; /* almond */
}

.typecast p span { display: block; }

.typecast .line1, 
.typecast .bubble_one .line3, 
.typecast .line5 {
	font-size: 2.8em; 
	line-height: 1em;
	padding: 0 0 0.1em 0;
}

.typecast .bubble_one .line1, 
.typecast .bubble_one .line3, 
.typecast .line5 { color: #607e5a; /* darker green */ }

.typecast .line2, 
.typecast .bubble_two .line3,
.typecast .line4, 
.typecast .line6 {
	font-family: "adelle", "Trebuchet MS", sans-serif;
	font-size: 3em; 
	line-height: 1.1em;
}

.typecast .line6 { text-transform: uppercase; }

.typecast .bubble_two .line2,
.typecast .bubble_two .line3 { color: #f8f7f0; /* almond */ }
.typecast .bubble_two .line1 { color: #9c9cae; /* lighter blue */ }
.typecast .bubble_two .line3 { text-transform: uppercase; }

/* author */

.typecast .author {
	clear: both;
	display: block;
	text-align: right;
	padding: 4em 8.5em 0 0;
	font-family: "futura-pt", Helvetica, sans-serif;
	font-size: 1.5em; 
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #555;
}

/* BUBBLE WITH AN OBTUSE TRIANGLE */
/* SOURCE: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */

.typecast .bubble_one {
	position:relative;
	z-index: 50;
	float: left;
	margin: 0 0 0 2em;
	background: #88b47f; /* green */
	padding: 2em 4.3em;
	-moz-border-radius: 70%;
	-webkit-border-radius: 70%;
	border-radius: 70%;
}

.typecast .bubble_two {
	position: relative;
	z-index: 90;
	float: right;
	margin: -12em 3.5em 0 0;
	background: #57575f; /* blue */
	padding: 3.7em 2.5em;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.typecast .bubble_one:before,
.typecast .bubble_one:after,
.typecast .bubble_two:before,
.typecast .bubble_two:after {
	content: "";
	position: absolute;
	z-index: -1;
    /* reduce the damage in FF3.0 */
    display: block; 
    width: 0;
}

/* THE TRIANGLE */

.typecast .bubble_one:before {
	bottom: -78px; /* value = - border-top-width - border-bottom-width */
	left: 160px; /* Horizontal position */
	border: 0;
	border-right-width: 60px; /* Angle of the vertex */
	border-bottom-width: 80px; /* The height of the triangle. Must correspond to value in :after */
	border-style: solid;
	border-color: transparent #88b47f; /* green */
}

.typecast .bubble_one:after {
	bottom: -78px; /* value = - border-top-width - border-bottom-width */
	left: 200px; /* value = (:before's left) + (:before's border-right/left-width) - (:after's border-right/left-width) */
	border: 0;
	border-right-width: 20px; /* Angle of the vertex */
	border-bottom-width: 80px; /* Height of the triangle. Must correspond to value in :before */
	border-style: solid;
	border-color: transparent #f8f7f0; /* almond */
}

/* creates the larger triangle */
.typecast .bubble_two:before {
	bottom: -79px;
	right: 120px;
	border-width: 0 0 80px 50px;
	border-style: solid;
	border-color: transparent #57575f; /* blue */
}

/* creates the smaller triangle */
.typecast .bubble_two:after {
	bottom: -79px;
	right: 150px; 
	border-width: 0 0 80px 20px;
	border-style: solid;
	border-color: transparent #f8f7f0; /* almond */
}
	    							
	    						

html

									
										
<section class="typecast">
	<div class="typecast__inside">
		<blockquote>
			<p class="bubble_one">We put<br>so much<br>of ourselves<br>into<br>these<br>things</p>
			<p class="bubble_two">But they're<br>just<br>things</p>
		</blockquote>
		<p class="author">Wilson Miner</p>
	</div>
</section>