Posts in category: Typography
Soho was developed by the designer Sebastian Lester and it is one of the most complete font families you can find.
We are talking about a slab serif family and as Lester says, it took him 3 years and 3000 hours of work. It comes in 40 families 32.668 (!) characters.
It is a great, an outstanding font and it remains slick in each of its versions.
Soho Regular
This is the regular version. See the random words and notice how beautiful it is.
Text
Soho isn’t the best choice when it comes to long text, mostly because no slab serif font is suitable for such purposes. However, in small paragraphs, titles and subtitles, it is one of the best possible choices.
Soho Condensed Thin
Look at this version. Each single character is great. I particularly like the “r”, “v”, and “y”.
Numbers & Ligatures
When it comes to numbers, it is difficult to find great one in most slab serif fonts. Not here. Great old style fonts. Simple yet readable and clear ligatures. What more can you ask for?
Stylistic sets
Each differentiation from the original version looks even better. The designer focused on the details and created characters you might use in a series of different situations.
Lester says about his font:
In designing Soho I set myself the rather lofty aspiration of designing the “ultimate” slab serif. I want it to look fundamentally 21st century. I wanted it to be supremely versatile; a weight, width and “tone of voice” to meet the requirements of even the most discerning of designers.
I think he made it, didn’t he?
The only problem (which is actually a big one) with Soho is its price. The full package costs more than €1500, but I don’t think it is too much, because such fonts aim to cover the needs of magazines, newspapers etc. The rest of us who work for the Web we can sit back and enjoy it. From a distance of course.
“The complete manual of Typography” written by J. Felici is a great book for those people who want to start with the basics of typography and move on. The book explores typography in depth and it can be used as a reference as well. Web designers and graphic designers are the main groups of people who would care about it, but the subject is practically open to anyone.
The book is divided into two main chapters. The first one has to do with the basics of typography e.g. differences between fonts and typefaces. It also covers the evolution of typography through time.
The second part of the book examines the correct use of typography and it covers all details about it.
Typography is a kind of art and technique at the same time and it is interesting to see how things have changed through centuries depending on the use. For example, Garamond, a typical typeface for everyone who uses a computer, was born in the 16th century because of people needs to create a more legible and at the same time elegant type. Garamond, changed the way people used typography and it remains unchanged and heavily used until nowadays.
If the previous paragraph feels a bit geeky, I must add that “The complete manual of Typography” involves a series of practical guidelines which can be applied anytime to our designs. Kerning and manual kerning, leading (or line-height, if you prefer), the differences between serifs, sans-serifs and slab serifs, the aesthetics of ligatures are only a few subjects this book covers.
“The complete manual of Typography” is one of the best on the subject and it is highly recommended to anyone who likes or has to work with typography. It is also cost-effective via Amazon ($32).
People who read this website should know by now that I care a lot for typography. I recently wrote a relevant series: “Applying good typography to the Web”. The 3rd part of it touches sIFR (Scalable Inman Flash Replacement) but it doesn’t go far enough. It is about time to erase this gap.
Where it started from
It is widely known that in Web design there is a rule which doesn’t exist in graphic design: you are limited to use a small number of fonts in a website. Typography is crucial in any website. If content is the king, typography is the king’s clothes.
As a result a Web designer can practically use only 5-6 fonts. I am leaving out of this conversation clumsy fonts such as Comics Sans. We had to find a way to use more.
What is widely used is text replacement by an image. It is a technique which works well because when editing images a designer is free to use any font. Bt it can be applied only for small portions of text or else the page will start becoming something else, not a webpage. It will be too slow when downloading as well.
The idea behind sIFR
sIFR can be used for any text no matter how long it will be, without sacrificing accessibility. It a great technique without any fault.
sIFR was introduced by S. Inman and it is supported by a number of decent Web designers. It works thanks to the smooth coordination of Flash, JavaScript, CSS and of course (X)HTML and it produces result of high value.
The “trick” begins from Flash. A designer can use in Flash any font he wants to. An .swf is exported from Flash and it is imported by the use of JavaScript. JavaScript is also responsible for the specific tag in which will be applied, e.g. the <h3>. Then via CSS the “new” text can be red or green, big or small, you name it.
I won’t say more on this because there are excellent instructions out there. However I need to mention that, while sIFR is more difficult to be applied in a page than the image replacement techique, this has to do only with the first time. Once it works well, using it again is a work in the park.
Advantages
I have talked about the advantages before, but if I had to gather all in a list, I would say:
- It permits the use of any type in any place in a website.
- It doesn’t hurt accessibility. Screen readers don’t care about it. They read the text just like in any other case.
- It doesn’t hurt accessibility even a user doesn’t have installed the Flash plugin and/or has CSS and JavaScript disabled.
- It is fast. At least faster than using images instead of plain text.
- It can be easily applied after the first time. It can be reused anytime.
For this website I applied sIFR for all the headings with the blue letters above the black background. Go ahead, right click on them and ‘ll see there are no images.
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:
p {
font-size: 1em;
line-height: 1.5em;
margin: 1em 0 2em 0;
}
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:
h1 {
font-size: 1.5em;
line-height: 1.5em;
margin: 1.5em 0 2.5em 0;
}
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.
This post was written after reading the excellent article by Richard Rutter for 24 ways (it may seem as a reproduction, but I think it isn’t because this one is simpler). A similar article, Setting Type on the Web to a Baseline Grid, was written for A List Apart and it is equally good too.
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 touched this issue 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.
Page 1 of 1
