Interaction Design

And I thought this would be easy.

I thought that I understood how type worked, but as I come to someone actively participating on a website I realize that making it work is another story. I think separating all navigation, and titles from all other body copy will help the reader distinguish what is what on the site. Therefore all body will stay in sans-serif and all nav and titles will be presented in Georgia or a serif font.

It was more difficult then I thought coming up with typographical solutions for a website.

Designing typography was a new challenge and very daunting. I will keep to sans serif fonts and use veranda as the body copy. I will expand my font by using scala as the header. The typography is still a hard point for me, I can’t seem to make up my mind on anything, no matter how many sketches I make.

Typography on the web is very limited. At least that’s what everyone says.

I really enjoyed the challenge of making the most of the typefaces that are available to me by using hierarchy. I really like how my type turned out, even though there are some obvious kinks to work out. I feel like some of my sizing for my site is a little bit off and may need to be adjusted. I’m also not so sure that all caps was the best choice for some elements of my site.

Overall, I learned a lot about how to use what you have available to you. It’s also nice to be a little limited because it really challenges your design sense, rather than trying to fix everything by hiding it behind a great font. Does that make sense? Hmm.

So for my typography, I wanted to keep my font choices to about a few so I could tie everything in even if there was no images to be seen.

For my headings and sub-heading I went for a san-sarif font, so that it would be easy to read and see. I used Futura, because it is a bold type and I think draws attention fairly quickly. I also used a san-sarif for my side bar navigation, I pick Myriad because I wanted the same feel as Futura but without it being the same.

For my body copy, I wanted to use a sarif fonts because it flows better and is much easier to read. I picked Baskerville because I thought it was a classy type that made you feel like you were reading off paper instead of a screen. I think when it comes to kids, you think they need some “fun” font with all sorts of different colors. I don’t think you have to dumb down type for them, I think they are smarter than we think and that they know what looks good.

As far as typography goes, I made almost everything in Georgia, which I prefer to be a good web typeface that is legible. I also made the weight a little thinner and then I also used Arial for some other things too.

Typography is limited on the web.

This is unfortunate. Fortunately, my website isn’t too heavy type wise. I will use a san serif font for my title words and i will use a serif face like palatino or georgia. I’m not sure what other information is needed for this post. My typography will include a little information about the individual planets, moons, etc. and then it will include a list of facts about that particular planet.

As I looked through several site I found that typography is very limited, but there are several way to make it look beautiful. I found that when I use typography in any project, I think about how hierarchy will help with the visual motion of the page.

I am using a lot of san serif attributes to my site because I decided it was easier to read in the long run. Because fonts are so limited on the web, I wanted to find something that would be easy to read for the main copy. I chose a serif for any main copy, and hierarchy is achieved through that typeface by using such thing as bold, italic, and space between sections.

I have been tweaking my idea throughout the process, but I just remember that simple can be the best, especially when the client is a 5th grade student.

For the typography of this page I knew I was limited to typefaces for the web. I am unfamiliar with most of these, some were made for the web, and others were accidents that just happened to work well for the web, but I don’t know the difference. Instead of doing the proper thing of researching the history of these fonts, I just gathered the list from Dreamweaver and started plugging them into my grey box. Because this is a site about machines, I wanted a very precise feel to the page. I decided on Trebuchet for the navigation bar and section headings because of its geometric qualities, and Georgia for most body copy for both its geometric qualities and legibility. Some added bonuses was that Trebuchet seems very kid friendly without going to the evil arena of Comic Sans. The two fonts paired are also very complimentary.

I will use size, value, emphasis tags and strong tags to differentiate other categories of type. The revised gray box shows some, but not all. I have made note of what categories of type will constitute my h1-h6 tags. This will make production run a lot smoother when I reach that point.

I decided that I wanted to use a simple san-serif font. I feel like san-serif fonts feel younger and will relate more to 5th graders. 

Along with using a san-serif I want to have some fun type in the header that is fun and interesting. I decided on something that looks like a fifth graders doodle on a school paper.

Some type for my header

As I tried different types of fonts I ended up using something simple and not too crazy since my header is pretty busy. 

I noticed that typography on a website needs to be a lot larger than in print and needs more leading.  I want to use paragraphs instead of bullets, it will work better for my type of information.

I like trebuchet/arial/helvetica paired with times the best for my site.

Type was hard for me because it is so limited and, even after set, it can vary depending on the browser. I took each of these type faces (trebuchet, arial, helvetica) and paired it with times in indesign to see what it would be like if there were any variances depending on the selected browser. I like this option the best of all the different typefaces I had to choose from.