Previously we discussed about using CSS and Photoshop to create pressed text effect. In fact, if you can use the CSS alone, lot of space will be saved, you can minimize the http requests and thereby you can speedup the loading time of your website.
Typography is a key element in the design of a website, you can use very simple yet great looking typography to illustrate your header or name of the website and thereby you can decrease the file size of the banner image (versus complex effects) to few KB size.
Typography within post using CSS
Obviously, you can use CSS to have great effects even within your posts. You can use the trick we mentioned for highlighting certain texts within post. We are demonstrating working examples below:
---
The Customize Windows
THIS
is
CALLED
typography
You can select the texts as they are texts, not images. So, search engines can easily read it too. Here are the codes we have used:
First set of typography:
<h2><span style=”background-color: #ffffff; color: #cc0000;”><span style=”text-decoration: underline; color: #cc0000;”>The </span><span style=”background-color: #cc0000; color: #ffffff;”>Customize</span><span style=”text-decoration: underline; color: #cc0000;”><span style=”background-color: #ffffff; color: #cc0000;”> Windows</span></span></span></h2>
Second set of typography:
<p style=”text-align: left;”><span style=”color: #c0c0c0;”>THIS</span></p><h2 style=”text-align: left;”><span style=”color: #000000;”>is</span></h2>
<p style=”text-align: left;”><span style=”color: #999999;”><strong>CALLED</strong></span></p><h2 style=”text-align: left;”><span style=”background-color: #999999; color: #ffffff;”>typography</span></h2>
It is not that, these are looking the best. But with these codes, you can materialize your ideas without using graphical elements.
Graphical typography
It is not possible to use CSS to produce very complex typography; even if can be, better to be avoided if that is a key point of the website’s design. Header banner is a good example.
There are many websites that specializes with only typography and you can get some idea for your next banner design. Another great source is deviantArt. There are so much talents, it is hard to not mention all; but we have to pick one or two for demonstration:
This falling typography is by crucialbiitch :
And this one is by HamsAljofoon:
