Showing posts with label Fonts. Show all posts
Showing posts with label Fonts. Show all posts

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!

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

"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.   ) 



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