Typography Is An Art
28
Typography is the practice of arranging letters and words to make them more readable, or more visually interesting. On the web, typography has long been hindered by the technology. However, times are changing and the future is looking bright for the art of typography.
The major hindrance of web typography is the very limited font set that is available to all users. When settings font in a CSS file, you can set one font which the site looks best in, but if users don’t have it, you need to fall back to one of the usual suspects. Stuart Brown has a rundown of 5 of the most-common web fonts, letting you know which to use, and which to stay well away from.
With CSS, we do have some level of control over the appearance of our fonts. It isn’t the equivalent of the pixel-perfection in print design, but it is still something, and to this end, Clagnut has 10 helpful guidelines. One of the most basic, but most important choices in web typography is text alignment, which Kyle Meyer has explained extensively.
If some of this seems a little overwhelming, don’t worry, because there is plenty of help available online. LifeClever have published a list of 46 of the best typography resources around.
Whilst many of the tools and pages are of great aid, the very best has to be sIFR (Scalable Inman Flash Replacement). sIFR is a way of using Flash and Javascript to allow you to use unique fonts for your headings. It allows you to create all sorts of headings, in stunning fonts, without the need for images.
Things don’t stop there though. In the latest A List Apart article, Håkon Wium Lie looks to the future with suggestions on what modern browsers and CSS3 could do for typography. To whet your appetite for beautiful text, I’ll leave you with a video of the incredible effects that can be achieved with great typography, and nothing else. For a few other examples, have a look at Wisdump’s latest article on motion typography.
If you know of any other typography links, let us know in the comments!
What’s Been Happening With Pro Blog Design?
I’ve been writing a few guest posts this week, most notably at ProBlogger. Darren Rowse was kind enough to let me write a post about choosing the right width for your blog. It was a topic in design that effects all bloggers, so you may want to have a read (And I’m sorry if it’s not up to the usual ProBlogger standard!).
As a final note, it was the first of September yesterday, so the top commenters list has been reset. It’s open season on those links now!
Enjoy this post? You should follow me on Twitter!
About the Author
Michael Martin
Michael Martin is the founder of Pro Blog Design. He works as a freelance web designer, loves WordPress, and has an unhealthy addiction to smilies.
sifr is nice, but it requires flash and javascript. A thing which not all users have available. Pretty much every blog though is hosted on some kind of host which supports GD, a graphical library for php for those who don’t know. It enables you to simply output your titles in any desired font to an image format which independent of which browser being used can always be read.
And a nice list apart article which shows really good looking images, but when actually viewing the html I as a user see nothing more but basic font since browser support simply isn’t there.
Not to mention that it’s digging up old cows from the graves since we already had web fonts in the past but since it was a way too easy way of spreading out viruses through them because the user loaded in the font in order to display it they got done with. Now how would handling it through CSS change that? It’s not like CSS is a server side thing or anything, you’re open to a whole load of risks since in order to see a font it has to be read in and if it’s infected you will be too.
Your safest bet for custom webfonts is and will probably for ever be options like gd since it’s done fully server side meaning you’re out of risk.
I liked that article by Kyle Meyer, nice one. Even though I’ve decided to go the other way with my justified font. ;)
That video is sweet! Kind of had a similar feel to the latest Casino Royale intro (not that it had anything to do with typography per se).
I never noticed before this post that you give title attributes to all your links – nice one!
Any reason why Top Commentators gets reset? Is that just how the plugin works, makes things more fair? Just curious, not annoyed that I got bumped back or anything. :P
Slevi – That’s the beauty of it. It degrades gracefully. If they don’t have either Flash or Javascript, they will see normal text. It’s not as nice, but it’s not horrible either.
And how do you infect CSS? You can’t. The CSS could only be used to load a font file. I’ve never heard of viruses in font files, but assuming it’s true, how hard can it be to create a font format that can only take the font images?
GD and similar all use up far too many server resources to be suitable. I’ve used it with resizing thumbnails in photo galleries, and even that far outstrips anything else I’ve ever used in terms of resources. Having to do that with a dozen images per page would probably crash most shared hosts with a reasonably popular blog…
Kristarella – It can be set to reset whenever you like. I reset it monthly, because it makes the list more useful. If I never reset it, then in a few months from now, some people (like you. :P ) would be so far ahead of everyone else that it would only be a useful feature for those 5 people. This way, everyone has a good shot of getting the link. :) (Sorry you got bumped back, but you’re back in the list already! Not bad!)
I read your guest post on ProBlogger without realizing you wrote it. :D
GD isn’t too bad in use of server resources if you use it well, making it resize a big load of thumbnails in example would be a bad idea. Using it to dynamically display text would be a bad idea as well.
But rather than dynamically displaying text you could simply make it create it into a static file upon writing your post which can then be used later on. Creating a single image shouldn’t be too much of the server to ask in any cases, if it is it’s time to move to another server :P.
Matt – lol. At least you read it. ;)
Slevi – All of the popular open source gallery packages use GD for thumbnails. Even WP uses it I imagine.
But if you’re only using it for a few images, isn’t that defeating the point? The idea behind sIFR is to get away from images. If you want images, why not just use Photoshop and upload them the normal way?
Hi Michael,
Thanks for all the useful information and wow! There is so much to learn and implement… And hey, you’ve been very “pro” right from the start!
Using photoshop requires you to actually do it manually yourself over and over, whereas using GD to simply generate the title image for you after you fill in the title doesn’t require any work at all except for writing the script which would create the images once.
And as for thumbnails I know it’s the library used, but if you have a lot of thumbnails to create at once it’s better to do it locally and then upload it. Your host will probably thank you quite a lot for that, some people tend to go as far as throwing 5000 images or something into it at once causing entire servers to nearly enter the point of dying under the load if they don’t limit the resources used by it.
As for sifr I get the idea of it, the thing is just that there’s still quite an amount of people which actually do not use flash nor javascript. Even if an alternative still is shown in that case, why go for a lesser result when you can achieve the thing you want for everybody anyways? It might make use of images, but does it truly matter when it goes through an automated process?
Some great typography resources there Michael, and thanks very much for entering my prize draw!
Hey Shine,
That’s the fun of the web. There is always something else to learn! And thanks!
Slevi – I’ve never written a GD script, but in a website, the most I’ve had to use for headings is about a dozen or so header images. It doesn’t take long to do that in a graphics editor. Surely writing the script takes longer?
sIFR is good because you don’t have images then. The download times are one improvement. The other is accessibility. Using images is only feasible when you are using them as CSS background, but what do you do when CSS is disabled? Or on a mobile device?
And how do they work for small screens? sIFR can be used for post headlines etc. How could GD be mixed with a liquid layout? The layout would be very small on a small resi. An image for a long headline would stretch that. GD won’t know that it needs to wrap to two lines (And even if you could find a way to teach it, then it would need to be generating images on the fly, which goes back to the cpu problem)
David – Thanks very much for holding it! I’m going to be as green as my little logo when I see who wins! :P
I was more indicating into using GD for post titles, if it’s a custom font in those you want you probably won’t want to be diving in your graphics editor for every post you make to create one.
And just like with anything else images can be resized as well if needed, going down from 1280×960 in example to 320×240 is a reduction of 25%. Resolutions are quite friendly of making height and width jump down equally in just about every resolution.
GD can simply output every title to a fixed size which you can easily blend into a liquid layout, so even if the res is small the image won’t stretch out anything. If sizing up though quality would drop a bit of course so be sure to do output to the most acceptable size or place a max-width on it.
Since it are post titles I doubt anybody would even use CSS to place it as a background, it simply wouldn’t make any sense since it’s not part of the layout in any way. The img tags do still exist for a reason after all.
And who has CSS disabled to begin with these days, try surfing around the net without loading in any CSS. Most pages and especially blogs are totally unreadable, if you do have any viewers wishing to access your page like that probably best is to create a subdomain which doesn’t use any css and outputs the same data in a prehistorical fashion.
For post titles, you would by using sIFR. That’s where it comes into its element.
Image resizing (up or down) using HTML is horrible. On fonts, it would be illegible in most cases (Especialy if you’re scaling between resolutions iphone sized, and resolutions 30″ screen sized!)
The image tags are a bad choice because what if the image doesn’t load? Alt tags?
And if you’re using images for all of your post titles, the homepage would take forever to load. I show something like 15 headlines on my homepage. 15 extra images to load would be a couple of hundred kb more for users to download. That’s just not practical.
And CSS is disabled on mobile phones. :)
Haha, much of this discussion went over my head, but I thought I’d point out this plugin in in case you hadn’t seen it. Image Headlines, it says it’s for WP 1.5, but it might work later than that. I might have used it with a later version. It was kind of spiffy.
Nice find Kristarella. That plugin actually does exactly what Slevi has been talking about. xD
Michael,
Thanks for all of the great articles and reosurces you have linked to here. I like how you have the links incorporated throughout the body of the post rather than just listing the links.
Thanks Steven. I think it makes for a more interesting read that way, and it forces me to choose very relevant links.
It’s a shame though sometimes because there are hundreds of great articles that I’d link to link to in these posts, but they aren’t related to the post topic, so I can’t… :(
I’m something of a fonts nut too, though I haven’t really broadened my scope outside dafont.com. At the moment I’m using ‘Bebas’ a lot, occasionally ‘GeoSansLight’. Both lovely… very conducive to the minimalism I’m going for :)
Yet another thing I can’t wait to check out! I swear every one of your posts is useful. I LOVE fonts.. I hate how limited text is on our blogs to a few fonts.
Skellie – I had wondered what your skelliewag.org title font was. GeoSansLight looks fantastic there. It couldn’t suit the design any better.
Have you tried using a .png format for just that title text (Not the image)? It would clean up the slightly fuzzy edges. :)
Mommy Zabs – I’m glad you found it useful! The only drawback to sIFR is that it is best used in small doses. Sadly, if you tried to use it on an entire post’s body text, it would slow things down a fair amount. :(
I downloaded sIFR and not sure how to use it! I keep looking for a read me file :)
At any rate- I may just try kristerallas plugin.
And its not just an easy art, its hard to determine which typography would really fit in on your pages.
just a test to you
Typography is really considered to be an art most especially for the people who are good and skilled with this.
Nice posting… I agree to that Clarence… I want to learn typography… :-)
David – Thanks very much for holding it! I’m going to be as green as my little logo when I see who wins! :P
me being a big fan of graphic art i love typography and mixed media
i like it, thanks very much for the info