Our advanced systems detected you're trying to access porcupine colors by an old and deprecated browser like Internet Explorer 7 or even 6! This website uses some technologies which can't be detected from such an outdated software.
Hard to believe, if you are not an eye witness. But it’s true. The two most important men of IT (whatever it may mean) shared the same stage at the same time sitting next to each other. And they talked seriously among many intervals of joking.
All this happened during the latest All things Digital conference. It is the new of the week, the month and the year.
I ‘m with Jobs because he makes better products and because he is a reason to think and move ahead.
However it would be foolish not to appreciate Gates. His work and products gave us the opportunity to become aware of a new digital era and find work. If he hadn’t computers so popular we would probably still use those green monitors. Is there anyone who remembers them?
They appeared wearing their typical costumes. Jobs wore his black sweater, blue jeans and sneakers. Indeed we switched back to New Balance despite the cooperation between Apple and Nike. Gates was again a nerd. He wore his classic shirt and trousers. No surprise.
It was obvious that Jobs was going to be the star of the show. However both were nervous at certain moments. I noticed Jobs while Gates did the talking: a hidden smile and the eye of the tiger before the attack. When he had something obvious to say he did his magic. When he didn’t he was somewhat awkward.
Gates let his opponent talk more, but he didn’t halt making jokes and even talking about the Mac and the PC guy. He apparently was less expressive than Jobs and more unassertive. He was Gates himself.
The people who took the interview did magnificent work: they were loose but they made some inconvenient questions to their guests. On the other hand, what can be really inconvenient for there guys? Maybe nothing.
Such an event can be the beginning of rumors and a new episode of the battle between the fans of each other. What I suggest is to relax and relish this one moment.
I nearly forgot all these greens. How much they match to each other and how much they do with the blue of the sky and the white of the flowers. People in cities we tend to look down on all these. I like cities. They do create nice palettes. But as you grow up you renegotiate things.
Time
You think time is a fact. Well not exactly time but the way you consider it. In a city you usually waste time. Time exists to be waisted. You try to catch it but most of the times you fail.
In the forest clocks work a different way. Hours, dates and numbers change. You can’t control them. It is not a fact anymore. After a while it is not important as well.
Animals
You spell the word “animal” and it sounds unimportant. As you grow up you despise animals as inferiors. In the forest things change once more.
The harmony of the nature is a matter of animals too. Harmony is not piece, it is equivalence.
I am glad I am growing up by respecting animals. Yesterday I made some new friends. A horse and two pigs. I saw them for a moment and I won’t probably see them again because they are negligible and consumable.
I prefer to show here a photo of the pig I met than the horse. Horses are proud and beautiful and everybody loves them. Who cares for a humble pig?
I don’t know where I belong to. It might be the city, the forest or something else. Why should I decide and why should select one of them? All I know is that I need more of these colors, more of these faulty clocks and more of these animals.
When you design for the Web you feel like a warrior who wants the best weapon available. Typography could be a lethal one, but the fact that users cannot see all fonts (since the system fonts are limited) is a problem.
So we had to find a solution. The best one would be a magical way to install some hundreds of font families to all users’ computers. Impossible. The next best alternative was to replace text with something else which would say the same by using the fonts of our liking.
We ended up with two solutions which work well. Which are they?
Text replaced by images
I first read about it several years ago at the website of the Web guru, D. Bowman. (What is written there is now deprecated, but the thought behind it is valuable).
Shortly, this method includes the replacement of text (headings mostly) by images. The designer uses whatever font he wants, he saves the file as an image and he replaces the heading with the image. The result is a heading looking the way we want.
There has been a lot of progress since Bowman’s idea. The great D. Shea gathered the best alternatives in one place so we can have them handy.
sIFR
The above approach is a good one. Maybe not so flexible only. The second solution is called sIFR (Scalable Inman Flash Replacement) and was first introduced by S. Inman. Since then it was further developed by a number of designers/developers. M. Davidson was one of them.
The two above links should explain the method in depth but let me tell you the short story: sIFR uses Flash, JavaScript and CSS in order to present the fonts we want the way we want. In Flash you write the text by using any possible font. JavaScript embeds the .swf file (Flash) into the document. CSS is responsible for the style and presentation.
An excellent example of the technique applied you can find at the new website of A. Clarke. All the headings there are presented the sIFR way.
sIFR is more complicated than the first method. However it may be proven revolutionary. It is accessible, it can be read by practically all browsers, it is fast and it is under development. Which means that it may be transformed into something even better.
End titles
Before I begin to write this series I was wondering “What more can I say? All has already been told by the gurus”. I decided to go on because I use typography a lot in my work and I couldn’t find all the articles gathered in one place. Of course M. Boulton has done it better than me before.
So is this the end of the series? The short answer is “yes”. I am going to create a special place in this website to have all the articles about typography together. In the future I am sure I will add more content there. Until then, lighter posts are yet to come.
One of the tricks that make text readable in Web is the vertical rhythm. It is about the empty (negative) space between the lines of text in paragraphs, headings, lists etc.
When defining a rhythm a designer can be pretty sure that text is going to act as a real part of a website, not a way to fill the space between images or columns.
What we are talking about
The following images include the same text with the same title. Their only difference has to do with the vertical rythm.
In this case both the title and the paragraph have not been edited as long as it regards the vertical rhythm.
Here we have the same text with some rules applied on it. The result is much more pleasant and readable.
Let’s suppose we want to achieve something like this. What does it take?
The (x)HTML part
Apparently, (x)HTML includes the text and only the text. The rythm and each of the rules to be applied have to do with the CSS.
The text above could require this markup:
<h1>Gutenberg (ca. 1450-1480) & The Impact of Printing>/h1>
<p>Before the printing press…</p>
<p>This remained true…</p>
Setting default browsers’ values to zero via CSS
Before applying any rule a designer should control typography. Most of the browsers set the font-size to 16pixels. If we want our font size to be equal to 10 pixels we should declare it. This can be done with two ways. The first requires setting a percent like this:
body {
font-size: 62.5%;
}
(62.5% is the number provided by dividing 10 with 16.)
The code above states that the font size will be equal to 10px. Why not define the same size straight forward in pixels? Why using percents? Because percents enable the magnifying or reducing the size of the fonts (by using Ctrl+ or Ctrl-) in a browser, even if the browser is an old version of Internet Explorer.
Instead of using percents, one can define the size of fonts in ems. Em Calculator can do this at once. This time the CSS file would be the following:
body {
font-size: .63em;
}
Now we have set the font size. We have to do the same for the padding and the margin selectors. This is a quick reminder about margins and paddings. The next image was made by the design wizard, Jon Hicks.
Setting margins and paddings to zero is pretty easy:
body, h1, p {
margin: 0;
padding: 0;
}
Now everything has been reset.
Time for some harmony
In order to achieve harmony we should increase the negative space
between lines of text
between paragraphs
between headings (titles) and paragraphs
The first two can be done in one block of our CSS file:
What does this block says? First of all that the font size in paragraphs will be equal to 1em or 10px.
Then we increase the white space between lines to 1.5em. This number is enough to ensure us that our lines “breathe” and the text is readable. If we wanted to do the same thing by using pixels we would have written: line-height: 15px for font size equal to 10px.
Last, we increase the distance between paragraphs. Now it is 3em. margin: 1em 0 2em 0 means that a paragraph is 1em away from the previous one, 0 from the right margin, 2em away from the next one and 0 the left margin (values are read clockwise). Of course these numbers might be good for an instance but not effective another.
What has been left is the distance between headings and paragraphs. Things are easier now:
Our title has change size and now is 1.5em, that is 15px. Same is the distance between titles. The relevant margins are 15px, 0, 25px, 0 (given in pixels). Obviously the values margins follow the size of the title (h1).
Closing the issue
The previous example is not dogmatic. Everyone can find his own rhythm and he must take into account a specific font may act differently each time. Vertical rhythm can be also applied to lists which can be much more beautiful if a designer wants so.
That’s all for this time. The next episode will cover some handy ways to use not system fonts in Web in order to achieve a beautiful optical result. Until then you can take a look at the previous episode.
Typography is one of the main characteristics of Web design. During the previous months I touchedthisissue but I think it is sometimes better to return to the basics.
This post hopefully is going to be the first one of a series about how typography can make a website look and act better. Of course it is not a complete guide to typography rather than some guidelines.
The basics
Each font carries some characteristics which make it special. If one knows them, it is easier to control it and use it effectively.
The height of a font is the x-height. However there are letters such as “h” or “g” which override the x-height. The part of a letter which ascends above x-height is called ascender and the part which descends below it is called descender. Ascenders and descenders define the ascender line and the descender line respectively.
Kerning και Letter-spacing
Kerning is the horizontal space between individual characters in a line of text.
Letter-spacing is the average distance between letters in a block of text. In Web design, kerning and letter-spacing is the same thing, but in print design apparently they are different.
Leading (or line-height)
Leading is the amount of space added between lines of text to make the document legible. The term springs from the lead spacers used by printers between lines of text in order to make it readable.
The term line-height is being used only in CSS and it is an equivalent of leading. If someone knows why we use this term instead of leading, please let me know.
em and points
While pixel is known to everyone, em carries its own story. It is defined as the width of capital “M”. It is also defined as the point size each time. For example, in 14-point type, em is a distance of 14 points.
A point is a way to measure distances in typography. It is almost equal to the 1/72 of an inch.
When designing for the Web it is better to use ems instead of pixels. One reason for this is that when changing the text size in a browser (by pressing Ctrl+ or Ctrl-) old versions of Internet Explorer do not make the change when text size is given in pixels.
Another reason has to do with elastic layouts. The whole width of an elastic layout changes according to the text size when it is given in ems.
Serif and Sans-serif fonts
It is one of the easiest ways to discern fonts. Serif fonts are generally rich and include decorative strokes (called serifs) added to the end of main strokes. Sans-serif fonts are simpler.
Of course there are fonts which are neither serifs nor sans-serifs. They are something in-between. Sometimes we call them semi-serifs. They exist to make our typo-life more interesting.
The wise combination of a serif and a sans-serif font at the same website can make the design extraordinary and beautiful.
Afterword
For the examples above I used Georgia (serif) and the old time classic Helvetica (sans-serif). I hope you liked this post as much as I did. The next episode of the series will include some ways to apply all the above in a specific design.
The other day I had a conversation with a guru of Web design, the person who has influenced me more than anyone else. I won’t mention his name just in case he doesn’t want to.
What he wanted from me was to give him an overview of Greek Web design. What is the main characteristic of Greek Web design? What are the main techniques and trends? What influences us? He also asked me to show him some of the most well known Greek websites.
What I told him was that we don’t have any particular style, we sometimes tend to copy foreign designs and the fact that we incline to Flash rather than (x)html markup. I also mentioned that we have a difficulty to use new colors, we stick to blue and gray and the style of writing for the Web is somewhat strict because we are afraid to look funny or humorous. Most of all I tried to underline that Web design in Greece is considered easy, that anyone can do it, so we don’t deserve to be paid well.
I don’t know if this is something that happens only in Greece. It probably happens everywhere but there are certainly many instances where people get what they deserve because there some others who know that this thing is not as easy as it looks.
It was difficult for me to find some Greek websites which carry a character. It is difficult to find Greek designers or teams of designers whose work reflects passion and style like people in Happy Cog do for example.
So I am not trying with this post to grumble and mumble. I am not trying to cover my own mistakes and everyone’s mistakes. I am trying to raise my voice and suggest that it would be great if we, the Greek Web designers, could gather around a table and see if there is anything we can change. I think that it would be great if we support each other, distribute knowledge and change a part of the status quo. Or am I asking to much?
CSS hacks are lines of code inside a CSS file which replace certain code with another in order to achieve the best possible design for all browsers.
Actually most of the hacks have to do with Internet Explorer 6 and below. Everybody knows that IE has caused the most troubles in Web design and it still does.
The following hacks are simple solutions which can be easily applied, not a complete guide to CSS hacks.
This hack is based on the fact that IE6 (and below) cannot treat many properties in a rule. Thus, IE will read the second property and it will ignore the first, while in the modern browsers the !important will prevail.
Since old IE cannot treats dotted lines as dashed, dotted borders look ugly. Thanks to this hack we have an at least solid line as a border for IE.
The first part of the code applies a rule and the second overrides it. This is something that old versions of IE understand.
So, as it happened before, the dotted border is bypassed by IE.
The child selector hack
html>body{
background: url(back.png);
}
This hack hides from old versions of IE the image back.png.
This happens thanks to the child selector “>” which cannot be recognized by IE. The modern browsers, including IE7, read it and apply the background image.
If this back.png image was a transparent one, this hack might have been a very convenient solution. As everybody knows transparent .png files are also not recognized by old IE.
The attribute selector hack
div[id="content"] {
background: url(back.png);
}
Like before, there is a selector, the attribute selector “[id=”...”]”, which means nothing to IE6 and below. The result is a background image which can be seen in modern browsers but not in old versions of IE.
Apart from these hacks there is another way to solve problems caused by Internet Explorer: the Conditional Comments. I wrote about them a short time ago. I can’t recommend the one solution or the other but little by little I find hacks more convenient for me.
This spring is probably the best of the last years. I may like it so much because I now live a bit closer to the country. Like I did for this fall here they come 4 songs I like a lot this period.
Doves - Ambition The background sounds remind me everlasting nights. With good company, drinks and talking about the universe and the stars. You are waiting for something which is going to come along with the summer. It may be nothing but the summer anyway.
Alanis Morissette - Crazy I like this version more that the original one because it is stronger and the bass drills you. You play it as louder as you can. It comes with the times when you are stuck in your car and you want to go up to the hood and start dancing. All the rest of the drivers do the same.
Secret Garden - Bruce Springsteen You drive in the highway. You start by the midnight to reach to your destination the morning. You drive to find her. The lyrics tell the rest of the story.
Roads - Portishead Absolutely lonely. Beth Gibbon’s voice shatters you. We ‘ve got a war to fight. Never found our way. Regardless of what they say. Hey buddy, we ‘ve got a war here.
However it would be foolish not to appreciate Gates. His work and products gave us the opportunity to become aware of a new digital era and find work. If he hadn’t computers so popular we would probably still use those green monitors. Is there anyone who remembers them?
I nearly forgot all these greens. How much they match to each other and how much they do with the blue of the sky and the white of the flowers. People in cities we tend to look down on all these. I like cities. They do create nice palettes. But as you grow up you renegotiate things.
The harmony of the nature is a matter of animals too. Harmony is not piece, it is equivalence. 
I first read about it several years ago at the website of the Web guru, 
While pixel is known to everyone, em carries its own story. It is defined as the width of capital “M”. It is also defined as the point size each time. For example, in 14-point type, em is a distance of 14 points.