Saturday, 19 March 2011

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


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

Friday, 18 March 2011

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>

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

embedding a flash file (swf) into a blog post

You might need this for all sorts of things, but especially for stuff like flash based photo galleries. All explained beautifully, right here:
http://www.aleosoft.com/flashtutorial_blogger.html

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

well done Onur!

One of my students has just thrilled me by designing a really cool, minimalist homework blog. Only one post and one page so far, but already there are beautiful details, like the tiny bit of black highlighted text on the page, the typography/colors of the header, (a great color scheme on the whole site, by the way), a gorgeous favicon at the top...

I am well impressed:
http://onuroral.blogspot.com/p/about-this-blog.html
:-D

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

structure: having the best of both worlds?

Ahumm... All these pull-down menus and so forth... Very nice and everything, but let's face it, what use can they possibly be on a blogspot site unless you can have an infinite number of pages and nested sub-pages?

A regular website and a blog both have their shortcomings but also their advantages. Could there be a way to combine the advantages and minimize the shortcomings?



The two diagrams above show the way in which a blogspot site is set up (above), and the way a regular website is set up (below). On a blog the home page is a stream of posts going backwards in time (so the home page is in fact the main content); whereas on a regular website a home page is just a plain old home page from where you are expected to go to other pages, (in some cases, more or less immediately), to reach the actual content of the site.

Blogspot allows only for a limited number of pages and the navigation is mainly achieved through the labels, which I think are brilliant. The labels do not search inside the pages, only the posts. So, depending on how careful you are with labeling stuff, they work a bit like the categories in wordpress. Or, if you go totally overboard (I think you can have a maximum of 2000) they would correspond to a kind of a tagging system. But, one way or another, although the labels are very cool - they do not make up for the loss of the pages, and especially not the loss of nested pages, which are another thing that you cannot have on blogspot.


So, would there be a way to bring together the labeling system, the post stream on the home page of a blog and the unlimited number of sub-pages and nested pages on a regular website? I think there is, yes. You would simply need to set up a child blogspot domain which would have the same design as the mother domain and use the posts of the child domain as pages, as I am showing in the diagram above.

This allows you to keep the labels on your mother blog and you have an infinite number of pages and sub-pages (depending upon how you link things up) on the child blog.

 (Tip:  To transfer the design of one site to the other, download the full template from the mother site and re-upload it to the child site. Or, click inside the HTML editor (expand widget templates by checking the box first), do a ctrl+A to select the whole code. Then copy paste the stuff into the same location on the new site. Everything will appear as if by magic. Only exception is the header image - that will need to be uploaded again, I'm afraid.  ) 

What's more is that you could also diversify layout widths between the two sites in such a way that your "pages" could consist of a much wider entry column, since you would not have the labels on the child site. (Pages do not get labels to begin with, remember? ;-). So, you could go with only a 2 column layout or maybe even a single column one. 

I have actually already started putting this to the test with a child blog for this site to which I have already linked one post which I started here and then completed over there. The second easypeasydesign site has a single column layout since I want to show really big images sometimes inside the post. Which was in fact my main reason for starting the child site. However, the more I think about it, the better the possibilities seem to be with linked domains all working as one site.

It is of course highly likely that all of what I am talking about can also be achieved all on one site through coding. However, for folk like me, who would not be able to pull this off all too easily, my suggestion may still be a good one to work with.

Oh and - there is a glitch, which even a non-coder like myself would try to fix, which is that you wouldn't want the footer on the child site, where it says "older posts" and "home", since you would expect the "posts" to work like stand alone "pages". However, that I am fairly sure is something that can be fixed on the HTML editor by simply deleting that gadget altogether.

 Note:   The diagrams above were made with the open sourced yed graph editor, which you can download from here:
http://www.yworks.com/en/products_yed_about.html 

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

Senior Art Director - Leo Burnett - Jordan

Leo Burnett Amman looking for a Senior Art Director with experience in integrated communication.

Send CV and portfolio to hr@amman-leoburnett.com

Thursday, 17 March 2011

all kinds of menus

You can find some very nice custom menus at http://bloggerhowtotips.blogspot.com/






























The image above shows you a selection from the available styles which you can generate on the site. On the left are vertical HTML/CSS menus and on the right are drop down vertical menus. Both pages give you the codes for all of the different design styles and also tell you exactly how to use them, which incidentally is through yet another HTML/CSS gadget - love these things!















And then there is also a smoothly animated multilevel drop down menu; again you can obtain the code for this from here, and again, this too works through the HTML/CSS gadget.

.............................................................................................................................
Girls Generation - Korean