proud of our own! Onur Yazıcıgil and "Duru"

Duru is an ongoing multilingual font project, which consists of four weights with small caps and alternate glyph sets with accompanying italics. Italics are to be included in the font specimen booklet in May 2011.

The creator of "Duru" is our very own Onur Yazıcıgil, a much valued faculty member of our university since Fall 2009. He and I co-teach the main Graphic Design course of the 3rd year and he is one of the greatest colleagues and friends that one could ever hope for.

And... an amazing typeface designer, as the following will show:

 Note:  Duru is due to be distributed through an internationally renowned professional type foundry in the near future. So, please stand by for updates!

.................................................................................................................................

design tutorial: clean body text in your posts

I have made some deliberately unaligned body text and taken several snapshots which I combined for a tutorial. Looks really ugly folks! :-P:

To get to the tutorial, please click on the image and read the annotations.

.................................................................................................................................

clean typography for website headers

I am not sure that what is shown above even needs much further explanation.

Clean typography, plenty of space, the usage of one strong color together with a lot of neutral ones such as grays, black and white - and you are more or less home and dry.

There will of course be occasions when the content of your site will necessitate that you use a company logotype or some sort of extra visual indicator on what the site is all about. But even then clean solutions will usually work much better since a website gives you a very small area to work on and things will usually end up being be placed very close together to begin with; so wherever you can be clean and simple it is good practice to go for it.

One thing web designers make a lot of usage of however are all the stylistic details which they use to enhance their work, by giving it a dimensionality which makes elements stand out from the page. When you look at the ones above you will notice that there are very few where the design elements have been placed on the page "as is". They have been worked upon with bevels, drop shadows, delicate touches, soft gradients, ultra thin strokes, and so on. Never overboard, never exaggerated, never so that it becomes coarse but very very carefully - almost like as if these designers are jewelers, working very patiently on exquisite ornaments or watches. This is something that I would encourage you to do as well.

Getting the exact right balance for these types of details is not so easy however. A lot of them are created with the layer styles in photoshop, but all I can say is that whenever I try my hand at doing something like this I cannot pull it off. I rarely manage to get something that has this level of refinement. So, my advice would be to use pre-created layer styles. A good selection can be downloaded from WebTreats. And here are a few other good places also:

http://www.photoshoproadmap.com/
http://www.dezinerfolio.com/
http://22pixels.com/browse/styles/

.................................................................................................................................

"handwritten" fonts

I was going over my student's homework blogs and there seem to be quite a few of them who want to use handwritten fonts for post titles and headers. (Quite a few available on the blogspot template editor - ouch!).

Most graphic designers will probably agree that for the largest part handwritten fonts are problematic design elements. And the reason is pretty much right there in the word "handwritten". Well let's face it, they are not, are they? They are artificial constructions which try to imitate something that is quite impossible to imitate since it is so organically individuated.

When we write we follow a personal rhythm; so personal in fact that handwriting is considered to be forensic evidence, just like a fingerprint: We never ever duplicate the same exact shapes; the way we write individual letters depends entirely on the letters standing next to them - each one we shape, link up and place differently.

Handwritten fonts, on the other hand, link or place the (same shaped) "a" in exactly the same way, regardless of whether this "a" is standing next to a "t" or an "m" or an "r". And so what comes out, in most cases ends up looking rather phony, I'm afraid. There are lots of different handwritten fonts to choose from, of course - but not that many are well made enough to be able to get over this inherent limitation of being imitators. Flight (below) is one such good one, I think:

 Note:  And then there are also "script" or "calligraphic" fonts, which should not be confused with "handwritten" fonts at all. These fonts are based upon historic engraver's texts where each letter does in fact follow the same exact rules, is linked similarly, if not indeed identically to the ones standing next to it. So, these fonts usually do look very sleek and find very good usage within the proper context. Below are three nice ones which you can get from dafont.  ) 

.................................................................................................................................

playing around with (HTML) type

I haven't really been looking too carefully at the compose tab when I am entering a post, I guess. Just noticed now that (unlike wordpress) blogspot allows you to change the fonts and sizes of bits inside the text intuitively.

Great news! Means you can have custom designed block quotes on your posts, without having to write too much code! (The default block quote command does not look too clever since it pushes the text inside, so it is usually quite tough to get things correctly aligned with it).

Of course, one would need to be very careful when doing any of this because it might end up looking absolutely awful if you don't get it right. Still, I cannot resist and am trying one out right now. The body text on this blog is Arial so I will use Times New Roman to get a nice contrast between sans-serif and serif. Usually works very well - especially if serif is also set in italic:

______________________________

And now I will make this quite big, so that it really stands out from the body text.

______________________________

Since this is a special element, a strong color should be OK to use for type: So, I made this a dark blue for added accentuation. Now, I will go back to the regular font size/color and write some more, so that I have enough text to fill the post - a block quote needs a lot of text to nest inside properly. Notice that I also added lines to top and bottom to give it even more definition. While the body text is justified, the big text is flush left since at such a big size it would be very difficult to justify the type and not get "white rivers", which are the lines that run through and break up body text vertically. Very clumsy whenever that happens...

Although I started out on the compose tab I ended up tweaking the code in the HTML tab of the post editor quite a bit: Changed the font size from x-large to a pixel value, and also I changed the line height with an added <div> tag. So, here is what the code for this ended up looking like (the stuff that I added/tweaked is marked up in black):

<div style="line-height: 30px;"><i><span class="Apple-style-span" style="color: black; font-family: 'Times New Roman', serif; font-size: 38px;">And now I will make this quite big so that it really stands out from the body text.</span></i></div>

.................................................................................................................................

bitmap/pixel fonts

http://www.dafont.com/bitmap.php

Now that we are beginning to speak about image based menu items - the above link will take you to one of the best collections of free bitmap fonts online.

 (Note:  Since bitmap fonts are based upon an exact pixel count they need to be used at the exact specified size which you will see all the way to the right on the red bar above the font preview. (Typographic point sizes correspond to the pixel size at 72 ppi screen resolution by the way). So, be sure to have the right size - anything less or more will make the font break up in really ugly ways.  ) 

 (Also:  Remember to set the anti-aliasing value to "none" from the pull down menu on the font palette, as shown in the screenshot below, since this value is what will give you the crystal clear sharpness that you want from a bitmap font.   ) 

.................................................................................................................................

design: hierarchy / text / lightness values

Since a website usually has very little white space (space which is empty of informational content, that is) the hierarchical components of a site will often end up being placed very close to one another. 

The two images above should hopefully explain it: If you make all of your text one color (white in this case), it will be quite difficult for people to know where to look first when they come to your site. If however, you use various tones of gray then it will become far more obvious where the most important stuff is, and then what comes after that. As a rule, things on the side bars are less important than your post, these should be darker than the post. Inside those, visited links are less important than unvisited ones, and the rollover link should pop out the most.

Inside the post itself it is a good idea to highlight or make bold the stuff which you would like to stand out. (I prefer highlight since I do not like the way bold text looks on websites at small sizes - becomes smudgy).

Size is also an element that can be used for establishing visual hierarchies, however since most of the text will have to be on the small side you can only really use that for post titles and the header: When it comes to body text, a change from 13 pixels to 14 or 15 is not going to give you enough difference and will only make your design look 'ambiguous' - a term which designers fear like death! So, tonal values for type hierarchies are one of the best ways to go in web design, I think.

.................................................................................................................................