Typefaces - Chosen w/ inspirations

WARNING: Some images in this post are graphic and may be considered disturbing or upsetting to those viewing them. If you're not good with blood, or exposed human entrails than please do not click on the links following.

--------------------

My first decided typeface is the one dealing with human anatomy, and not just regular "this is an arm, this is a leg, look a nose!"  human anatomy either. I'm utilizing all major organs, and entrails in order to create this typeface and I'm hoping to bring forth a level of detail that is more sophisticated than cartoon-y like my first examples were following:

I'm going to give them more dimension and depth if I can. I kind of want to go sort of macabre with this. Hopefully that is allowable?

Inspirations: Human Heart, Human Intestinal Tract (Large & Small), Human Lungs, Human Brain, Digestive System (Stomach / Pancreas), Human Liver,   

Journal Entry No. 4

For our 4th journal entry we were to read an article on understanding the difference between Typography and Lettering, found here.

It was an interesting read, although it was rather long and I suffer from a shortened attention span of late. The article went into an explanation as to the difference between Typography and Lettering, Lettering being drawn elements of type (whether by hand, in a computer program, etc.) not traditionally developed for the use in actual printing. So basically it's like when you made the word "Mom" all pretty and curly and whatnot on your Mother's Day cards as a child because you thought it looked pretty and hoped she would too (although my mom didn't care either way). Whereas with Typography, it deals moreso with the aspects of how a typeface interacts together and how to arrange it with the idea of making legible print or online type for the purposes of reading.

The history lesson was interesting, although some of it I knew before. I honestly wish I could have seen more examples of Illuminated manuscripts. I follow a couple history blogs on Tumblr and a couple of artists who still do illuminated manuscripts, and I have to say those things are absolutely beautiful. Doing something like that requires so much patience and skill, I don't know if I could possibly possess any of that.

I did hear about the illuminated manuscript of the bible that was recently completed, though. I was pretty sure they had it on the Today show a couple of months ago, and I was just constantly amazed by what all they did with the materials and how beautiful it looked.

Anyway, the second part of the journal entry was to find hand-lettering we find inspiring from the links in the blog and upload them onto here and talk about what we liked about them, so here we go:

NOTE: Funnily enough, some of these blogs are actually run through tumblr, so guess what I'll be following?

• I found these absolutely beautiful. The idea of sitting there and basically imprinting onto the paper to give it dimension with that slight pop of color is just astounding. I'm very much a sucker for decoratively curled ascenders and descenders, so seeing lettering like this is really alluring to me. I think what I like best from this example is the fact that the negative space is what I pay attention to most. It's like those raised forms are what are creating the letter-forms instead of the imprint and ink.
• I'm also very fond of this one here. I like the idea of taking old-styled lettering and updating them with some flourishes. Once again I'm also heavily drawn to the negative spacing in the letters, and the raised and imprinted surfaces of the paper. I can't say much in terms of things like ascenders or descenders as the examples don't have much in terms of that, and since they're not side by side I can't comment on things like x-heights or whatnot either, but they are extremely visually appealing to me. I'd probably use them on something like invitations to parties or as the lettering into leather-bound diaries.
• I like Simon Walker's piece for Gold Top Cider on his portfolio page here. I always felt like condensed fonts commanded so much more attention than just giving something a bold element , and the slight shadowing to the characters with the different colored shadows emphasizes them well to me. My only issue with condensed typefaces is the fact that they're so much harder to adjust and use when you're creating things around them. You almost have to restrict yourself to smaller spaces so they feel effective.
• I'm also fond of this font here, by Claire Coullon. I noticed throughout most of her typeface examples that she has elements within them that connect them in certain places, almost like it's a signature to her. But I thought this particular typeface was effective with the connection of the elements in the characters with bowls and such. The connections seem almost flawless between the two, like someone who is doing calligraphy but without that unnecessary sharp edge to it.

I ended up bookmarking the article, because I find the links relevant and I like looking at other people's work to inspire me. It was a good read, and I found a new blog to follow on Tumblr, so I'm happy.

10 Typeface Ideas w/ Samples

All Typeface ideas presented here are the simplest of ideas for the basis of this exercise and are subject to changed and complicated depending on what I pick :T.

^ Human Anatomy Typeface ^

^ Crochet Typeface ^

^ Herb Typeface ^

^ Needle Point Typeface ^

^ Simplified Henna Typeface ^

^ Knotted Ribbon Typeface ^

                                           

^ Comic Book Dot Gradient Typeface ^

Journal Entry No. 3

The journal entry for this week was to look over the link found Here in regards to responsive type and try out the software, answering the questions that following along in the journal outline.

After downloading the example and trying it out for a few moments, I find that the idea of responsive type to where someone is situated to their screen novel, but not entirely useful at this point in time.

Why do I find it not entirely useful?

The simple reason that the standards of technology haven't completely caught up to where the program thinks we happen to be in terms of access to technology. Presently, in order for the program to calculate how big or small it should make the text on the screen in front of you you need to have access to a webcam. As I write this, I'm sitting at my desktop which has no webcam attached to it in any capacity. I also do not own a webcam for this unit, and the laptop I own downstairs also lacks one.

Why is this?

Mostly my economic status, if we want to be blunt. My laptop (while working well for its age) is over 5 years old and was therefore designed during a time where built-in webcams weren't a norm for the devices. Now that it's so old, my laptop also no longer receives OS updates from its creator site, meaning that newer webcams, etc. can't be used with my model. My desktop's peripherals are also quite a bit older than the actual system itself. While I'm running Windows 7 on a brand-new motherboard/CPU combo with updated Ram and graphics cards, it's attached to a relatively old monitor that was given to me by a friend as a birthday gift before he moved out of the state. In essence, my computers are either too old for the technology or are a hodge-podge that doesn't allow for compatibility.

Currently, this is how things are for a lot of people. We're hodge-podge users or a couple generations behind the norm. And since it's difficult to make the assumption that people can afford to go out and buy updated systems regularly in this economy to keep up with the technological demands, there will probably be a large amount of people unable to even access face-recognition type zooms like that one we looked at in the article.

Maybe several years from now when the market is flooded with the normality that is installed webcams, we might be able to start integrating this into our design thinking, but presently too many people are behind in technology to use a program like that and don't have the funds to update themselves onto a system that can use it.

Additionally, (by looking at the gif and remembering my experience with it), when I zoomed out too far I wasn't exactly pleased with how the font made things look on my screen. If it were to be used consistently in the creation and utilization of websites, I find that it'll be frustrating for both the user and the designer to work around a responsive-type auto-system. If there was something that could accompany the responsive type (like, I dunno, responsive design), where layouts responded accordingly to the increase or decrease in type and moved around in order to keep the visual flow going regardless of the proximity to the screen, I could see this working a lot better.

Right now I think it'd be a pain on the younger and more professional users, who do find the look and feel of something as important as the use of it. I know from experience with my grandparents (those who are not in the teaching field and therefore use the web and other technology for more leisure-related activities), the look of something isn't always as important as its usability, so they might not mind broken columns or floating pictures if they can read what they're trying to read.

Playing off of this, I also think on a personal note it's kind of bothersome if its able to constantly adjust. There needs be some sort of timing algorithm in place or something. It sounds weird, but from my experience I'd not want to use this program (even if I find it novel and cute) primarily because I'm someone who sways constantly. I adjust in and out a lot based upon what feels comfortable to my eyes and back at the time, and if I'm leaning forward (like I often do) to get a closer look at a picture or something, I'll find it highly distracting to see my text move at the same time with me.

Continuing on that line of though, I'd also find it extremely distracting and cumbersome if I have to constantly turn something on or off to accustom myself to my natural habits. If something can't learn to pick up on my habits right away, or pace itself in a way that doesn't cause my habits to become a bother in the process of utilizing it, then I'm really not going to utilize it.

Overall, something like this responsive type program would probably be useful in the future when things are a little more streamlined in terms of what their systems come standard with and a large majority have readily available access to them. Programming like this is lost on us who're still stuck in the transition phase as we tend to catch up with technology (for instance, I just got my first iPhone over this Winter Break. It's an iPhone 4...). And until refined, it looks more like it could just be problematic to those who value both usability of a website, etc. and the feel of it.

While the fascination with motion-capture to gauge how large our text should be, or function as a form of entertainment is fun and creates a lot of interesting things a long the way, there's not enough people currently into the concepts of it to make something out of this. It's like with people's fascination with putting things in 3D. It's cute and fun, but if you were to poll how many people actually cared that its incorporated into a movie or video-game, you'd find that the answer to that is surprisingly low. I feel that this is the same with responsive-type utilizing programs like this. The response will be overwhelmingly low at present until other factors fall into place that make it more plausible for people to want to use it.

--------------------

Continuing on with the assignment, I picked out another two articles off the website we read our original article on that inspire us. My two were in regards to your IP Address generating a color palette and The 3D printing pen.

For the first article, it's a sort of self-explanatory thing from the title. This is an article about an experiment, called Pretty IP, where they take your IP Address and translate the numbers into colors and display it to you. It was created by a design firm in London called Strange, and was initially an exploration as to how they could create "dynamic or living logos". Possibly similar to the responsive type program idea I talked about above.

I simply thought it was adorable that they'd take your IP Address and give you a color palette based off of it. This is the one from my home desktop: 

As far as the printing pen was concerned, I actually found that on my tumblr last night and was really pleased to see it again on this site, so I grabbed it. It is, in the crudest sense, a hot glue gun you can draw with. And I use that description in the absolute crudest sense. This is far more complex than a glue gun you're drawing in the air with, but it helps give a better visual idea as to the mechanics.

Just think of what you could do with type in use of this thing? It reminds me of the map typeface exercise we did and the individual who created letter forms out of the actual map paper. I found the 3D effect really interesting. This 3D pen could be used in a similar fashion to create interactive typefaces for use in promotional material.

If the plastic is strong enough you could do whole floating type installations with this thing. I'm really hoping the Kickstarter project gets the necessary funding, because this thing looks like a lot of fun and could be utilized in interesting ways for both type and other forms of art.

Project 6 - A Film Series, Part 1

This project is going to be a large project consisting of several different parts as explained by our professor. The first part was dealing with the idea of using multiple divs in order to create columns and to create a layout. We also learned the "overflow: hidden" property. We also experimented with the importance of line-length.

The exercise for Part 1 of the project was basically just messing with the div and figuring out how to adjust it to a div for line-length in our columns for readability.

These were my screenshots for the exercise in our power-point.

Afterwards we were instructed to created our own layout comprising of two or more divs (I think it was just two though) in order to structure a film series and created a layout for it with readable line-length and columns. We needed to sketch out a few ideas (I'll upload those later, I'm on my home computer right now) and then to use what we learned in our exercise to translate it into a two-column layout to make pretty down the line.

These are screenshots of my specific column layout for the project. It will probably change down the line when we add more elements to the project, but for now I chose my layout purely on the readability of the body-copy.

The rag on the body copy used in my layout is varied enough where it doesn't start looking like one uniform shape, as if I had justified the body copy instead of aligning it to the left, and it is long enough where there aren't any broke dates or locations that I could find. Again, this will probably change depending on later elements, but right now it doesn't look half bad to me.

Project 5 - A is for Alignment, Part 2

Taking our "A is for Alignment" assignment a step further, we started toying with the idea of adding background elements to our compositions in order to aid in creating strong vertical lines and alignments. We did a quick in-class exercise to add a background to our previous in-class example. We were creating "counterpoints".

This was my class exercise for counterpoints. I took a small A and added the image to my composition to reinforce my strong vertical line and make a focal point.

Then for homework we were to do the second part of Part 2 and take our composition from Part 1, and add a background image, as well as hierarchy to the piece through the use of size, typeface, stylization (bold, italix, etc.) or color to create more accent points or "counterpoints" in the piece and create a comprehensive composition with still a relative focal point to it that allows the eye to move.

These were my screenshots for that.

I had much more fun with this as I was able to get a little more creative with it. I took a very light gray A and made it a background image to the rest of the text as a sort of subtle counterpoint where you go "Oh! I didn't even see that at first!" when you manage to finish looking over the rest of the text.

I chose to make the text A large and saturated in colored to make it the most noticeable counterpoint in the piece. Additionally, I change the typeface of the heading to the paragraph and made it italicized as a small hierarchy shift and made the bold text underneath it another, lighter color underneath to make that stand out and tie back into the main counterpoint, being the big text A.

Therefore my hierarchy idea is as follows Giant Purple A -> Bold Light Purple Terms -> Italiczed Changed Typeface Intro -> Big Light Gray Background A.

Admittedly, I notice the big background A when I looked at it, but I think that's because I already know its there. If I hadn't put it in myself, it might take me a moment to notice it.

Project 5 - A is for Alignment

Because we didn't get through the entirety of the power-point for today's class, we had to do the Project 5 in-class assignment and out of class assignment entirely out of class. It deals with using divs and text manipulation to create interesting looking compositions for type on screen in websites.

Following along with the instructions in the lecture power-point, this is what I acquired as a result for what would have been the in-class portion of this assignment:

We were then let loose upon the world to created our own version of the project by creating an alignment with a strong vertical line and focal points using various visual elements. Our sheet said something about using backgrounds and colors in this, but the professor ran out of time before she could explain it to us, so I don't recall if we were supposed to find out how to do that on our own.

This was my composition for my version of the project. I dropped the text down on the page as if there was going to be another element added to the top later on, made the A the focal point of the piece without making it overbearing and still keeping my vertical line. I made the "A is for Alignment" an accent piece to the text as if it was an intro element. And I added to the div height for the overall body text in order to add some negative space to the right and give it some visual interest.

Project 4 - A Short Bibliography, Part 2

In class we took our original bibliography from A Short Bibliography, Part 1 (the one where it was entirely either done in Georgia or Verdana) and tinkered around with the idea of using secondary fonts as either headers of documentations, articles, etc. and what kinds would match up with what. There was also the secondary purpose of learning how to use the @font-face command and how to stack fonts (to which I already know how to do).

Additionally, it was also an exercise as to reading and understanding the legal jargon associated with the use of free materials and how its important to look over that jargon so that you don't end up in deep water for it.

We were told to use a script font found on fontsquirrel.com for the first part of this exercise, as the teacher wanted us to read and understand the legal documentation that often times accompanies free-fonts, as well as to spot what is a good font to use and what is one you shouldn't use based upon what the legal documentation says.

I ended up using a typeface called "Rochester Regular" for this exercise. Mostly because it was Rochester and that was where my boyfriend went to school, and also because it doesn't look terribly hideous sitting next to Verdana.

Second one was a little more tricky because I had to pick my secondary type out by carefully looking as to whether or not the font would clash too terribly with my body-copy font or whether or not it looked too similar to my body-copy font.

I ended up going with a sans-serif like my body-copy. It's called "BubblegumSans Regular". I picked it because it seemed to have a similar x-height to Verdana. It also has similar bowl shapes and apertures. This way the two sans-serifs weren't too entirely different in terms of most structure, but there were enough differences so that you could easily identify they're different.

For example, Verdana and BubblegumSans Regular have very different ascenders and descenders. Verdana's is much straighter, while BubblegumSans Regular has a significant curve to it making it distinguishable to its sans-serif cousin. Going off of that point, BubblegumSans Regular has much more curving to it than Verdana does. Most of Verdana's curving is left entirely to where the bowls sit, whereass BubblegumSans Regular has curving even within its stems.

Looking over them at just a glance, you can tell the two are different fonts. But the differences within their fonts doesn't cause a lot of confusion when looking over or reading text in association with one another. And their common elements allows the viewer to flow from the header of the piece to the body-copy without stop for a significant amount of time to readjust their viewing to a typeface entirely different.

Journal Entry No. 2

For our second typography journal, we were to watch kinetic typography on the website linked in the PDF document and pick from it our favorite and least favorite, explaining why we think it works well as kinetic typography and why we think it doesn't work very well.

The two I decided to pick were the following:

The Dark Knight as my favorite, and

Kinetic type by Dani Alvarado as my least favorite.

Although, I admit, picking kinetic typography from that list was a little difficult as there were a few on there that I knew very well and loved dearly, but I chose anyway...

The reason I feel The Dark Knight did such a wonderful job was because of its pacing, its rhythm and the way in which the developer of the piece displayed certain aspects of the kinetic type. It was simple but commanded presence, much like the character of The Joker in the actual film.

The developer moves the type along with the stresses of the speech and makes sure to carefully, but importantly distinguish when The Joker is talking and his associate. They also do a great job of reinforcing what The Joker is saying throughout the speech by making the type follow the speech in its actions.

For example, when The Joker claims he's only going to burn his half of the money, half of the typography literally goes up in smoke. When The Joker is stressing the importance of gunpowder, dynamite and gasoline as simple tools to create the biggest sense of chaos, he makes sure to show the properties of each of those specific items by having them fizzle out like the actual material.

Other great examples were the stressing of the words as he spoke, just like The Joker was attempting to stress his meaning throughout.

However, in Dani Alvarado's kinetic type piece, you don't get that cohesiveness.

While I understand Alvarado is attempting to convey a message, the message they are trying to convey is instantly lost on the song. I found myself struggling to keep up with what they had going on in their piece as my attention was constantly being demanded by the song I was hearing and instead of focusing in on the words on the screen, I was too busy trying to understand the words of the song.

Additionally, I feel like things were rather disjointed in regards to the message they was trying to convey. They picked names based upon how they could utilize them to further move on the piece, but I was left there wondering what the point was supposed to be.

There was quotes from various presidents, from both party affiliations. There was an emphasis on the Iraq war and our debt and things of that matter, but some of the names given or quotes given had nothing to do with either. It felt jumbled.

If the point was that we're responsible for the fools we put in office, ok. I got that, but at the same time it makes me wonder why you would even bother putting the piece together in the first place? Most people who don't align with the current President's party think that everyone who voted for them is a fool. So in the end it's just fools voting for fools, and we think each other is wrong.

The message was confusing. I picked up very little in regards to that.

In regards to the actual type itself, some elements were just not timed well. They flowed too quickly, or didn't flow quickly enough. They were too sporadic without any real rhythm or feel to them and had fancy things done to them that degraded whatever the point was attempting to be.

It just... it really didn't line up very well with the music, and I think over all the music is what eventually throws everything off despite the above paragraphs of message gripe. If you're going to pick a song or a piece of audio to go with your kinetic typography, you need to make sure they flow. If one is moving faster than the other, or slower than the other, it just ends up feeling greatly disjointed.

Here's another piece I thought worked well. It was already up on the website we had to visit for this Journal Entry, but I love it to pieces:

Project 3 - A Short Bibliography, Part 1

The project for today's class consisted of utilizing previous knowledge from Project 2 (where we chose fonts to give a selected word connotation) to construct a Bibliography using HTML and CSS to present in a web-format.

These are screenshots of what we did in class together with the Professor. With this constructed we're now allowed to wander off on our own and get creative with the font for this current Bibliography, showing hierarchy through the use of size, italics, bolding, etc. to style the sheet.

Below is the updated version of the Bibliography from class using the Vollkorn typeface found on Google Web Fonts. It's another Serif, like Georgia.

I don't know if she wanted us to just do the body copy in another typeface or the entire thing, but my guess is she wanted the entire thing done in an entirely new typeface. Next time I'll have to remember to ask off the bat.

Our homework to go along with the in-class work was to construct our own Bibliography according to the guides she gave us in our digital PDF hand-out. It's all in regards to typography, with our sub-headings being that of Motion/Kinetic Typography, Vintage Typography and Hand Drawn Typography. Interestingly enough, each time I look for a book in regards to one of these I keep coming up with many hits that have Steven Heller as an author or editor.

I take this as a sign I should probably look up Steven Heller and see who this particular individual is if he has his name on so many books in regard to typography. The only category I didn't find him in was the Motion/Kinetic Typography search, which was admittedly hard looking for books on it as they weren't books by themselves, but most were only portions of a larger overall book.

Would those count towards it?

These are screenshots of the bibliography done for homework. I managed to find at least 2 books on each subject, and perused design blogs for the articles linked below. Most had authors, although one did not but I think that the particular article used pre-dated the addition of contributors to the site.

I looked through a few different fonts in regards to this particular piece, but ended up settling on Varela. It looked best both as body copy and as headings. Some of the fonts only looked good as body copy, and when it came to the headings they fell pretty flat.

Here's screenshots of what the fonts I cycled through before settling on Varela look like:

I'm not entirely sure as to which screenshots we're supposed to be comparing and contrasting for this exercise, but I guess I'll touch on the two done outside of class and not the one done in class. In other words, my example using Vollkorn and Varela.

First off, I did not intentionally choose V-named fonts. That was an accident, lol.

Now onto the actual fonts themselves...

Aside from these two fonts being of different types (serif versus sans serif)