Create a Wordmark with CSS
In this short exercise we’re going to look at how we can use CSS generated pseudo-elements to fake ‘blocky’ letter forms.
Early today I stumbled across Bastian Allgeier’s beautiful new portfolio website. I noticed his logo is made entirely out of markup and CSS. Inspired I set about designing my own.
The Markup
I’ve tried to keep the markup as simple as possible. I don’t usually advocate cluttering up markup with non semantic elements, so this example should be seen as an exercise.
<h1 class="cssLogo"> <span class="W">W</span> <span class="I">i</span> <span class="L">l</span> <span class="L">l</span> </h1>
Styling
When designing our block letter forms we have to take in to consideration the restrictions of css. There is no way to define shapes using the technology, this is usually the domain of SVG or Canvas. As such, we can really only four sided shapes with 90 degree angles and with the use of border-radius, fake circular shapes.
CSS Content Property
We have four boxes created from the four span elements, how exactly do we turn these boxes into ‘W’, ‘I’, ‘L’, ‘L’? The answer is we can’t unless we have more elements to style. We could bloat our markup even further by adding more spans around each letter or we could make use of the CSS content property in conjunction with :before & :after pseudo-elements.
The ‘Content’ property can be used to generate text and images that doesn’t add any semantic value to the content. To be more succinct, it should be used to enhance look or interactivity of the element but is not needed to fully understand the ideas present within the copy.
Here’s the syntax
selectedElement:before{
content: 'Generated content here';
}
Adding a :before or :after pseudo-element has the same effect as adding another element to the document. As such it can be styled as if it were a completely separate element.
When specifying the css content property we have the option of adding no content. We achieve this by using empty quotes
selectedElement:before{
content: '';
display: block;
width:100px;
height:100px;}
Using the above css we have generated an block level element with no content.
By using this method, one span element per letter becomes three span elements: the original span plus the :before and :after CSS generated pseudo-elements.
Constructing the Letters
This is the creative part. I essence you have to come up with a way to construct the letter forms out of three blocks. The blocks can be used in two ways:
- To construct the body of the letter i.e. you add the blocks together to make a whole
- Negative space – One block ‘cuts’ a piece out of another.
I’ve used both methods in my example.
Constructing the letter’s body
If we take the letter ‘L’ for example
span.L{
width:96px;
height:180px;
margin-right: 104px;}
span.L:after{
content:'';
position: absolute;
background-color: #E1491F;
height:96px;
width:84px;
right:-84px;
bottom:0px;}
The code is pretty straight forward. The vertical steam of the ‘L’ is defined using the original span, while the base is defined using the generated :after element. It’s positioned absolutely in relation to the original span.
The ‘i’ is achieved in much the same way.
Using Block level elements as negative space
For the ‘W’ I had to fake the angles rotating the two generated pseudo-elements and have them cut into the original span element.
span.W{
width:300px;
margin-right:10px;
height:180px;}
span.W:before{
content: '';
position: absolute;
background-color: #eee;
width:96px;
height:250px;
-moz-transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);
left:-53px;
top:0;}
span.W:after{
content: '';
position: absolute;
background-color: #eee;
width:96px;
height:250px;
-moz-transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-o-transform:rotate(20deg);
transform:rotate(20deg);
right:-53px;
top:0;}
The pseudo-element’s background-color will have to match the background-color of their parent container.
In Conclusion
So that’s how I did it. Granted the results aren’t exactly stunning but it does show what can be achieved with CSS and a bit of creative thinking. I hope this served if nothing else as an introduction to the content property and pseudo-elements.
I think I’m going to explore this even further by creating an entire alphabet.
Further Reading
W3C :before & :after Pseudo-Elements Spec
Multiple Borders using :before & :after Pseudo-Elements Tutorial
Using Hyphenator.js
In the print world justified text is a lot more common than on the web. The web’s inability to hyphenate text leads to huge rivers of white opening up in the copy, hampering readability. Mathias Nater’s javascript library gives us a practical way to implement that print look.
Before we delve in any further, here’s a quick demo of what hyphenator.js is capable of. As it’s Halloween I thought it would be fun to use Bram Stoker’s cult horror classic, ‘Dracula‘. I’ve focused on getting the typography to look and read like print. You’ll notice on the top left corner there’s a button entitled ‘hyphenate’, toggle this to turn hyphenation on and off.
How do I use it?
Hypenator.js couldn’t be any easier to use. You have two options
- Use the library as is
- Or roll your own by using the handy merge and pack tool.
By using the latter you can avail of one minified file containing your chosen language(s).
After you’ve downloaded the script, add it your doucument header and initialise it by using
hyphenator.run();
It’s then just a case of adding the hyphenate class to elements to hypenate and thedonthyphenate class to elements you don’t want to hyphenate.