Graphic Design

The best interface – a contractual approach to design

I recently saw a post called “the best interface is no interface”. I started thinking about that title. There is no where that you can actually have no interface. If there is no interface there is no interaction.

So what is an interface then? My first thoughts when back to my programming background. What is an interface in programming? In it’s most basic form it is a group of related methods (designers, don’t turn off your brain, or go somewhere else just yet. This will make sense to you, in fact this article is for you). Basically you are creating a contract to use. A simple interface example:

1
2
3
4
5
6
interface biker {
    void bike(bike fuji);
    void cadence(int speed);
    void gear(long ratio);
    void break(long friction)
}

The thing to notice here is there isn’t actually any code here. It is just setting up a contract that has to be followed to create a biker. It needs a bike, a cadence, a gear, and the ability to break. Basically it is defining what needs to be done.

Contracts in design

I really liked that idea of a contract when it comes to defining an interface. What is my definition of an interface. Well … here goes. “An interface is an interaction point between two systems regulated by a contractual agreement.” There. That is an interface. So let’s walk through this and why this even matters.

Why a contract?

Isn’t a contract an agreement by two people that they sign? Yes it is. So we change people for systems and a signature for an agreement and there you have it. An agreement by two systems that spell out how they are going to interact. For example. I create a contract with an employer. I agree that I will work and they agree to pay under specified terms. Both parties need to agree to fulfill the terms of the contract.

Let’s move that to an interface, a simple one, a doorknob.

What is the contract here? The hand agrees that it will turn the doorknob a specified amount and the doorknob agrees that it will unlatch. A simple contract. That is why I really like this approach it simplifies. It also tells us what exactly we need to comunicate to the user through the design. I’ll touch on this later.

The Doorknob

Let’s go back to the door knob. Let’s apply this definition of interface.

Two systems:

  1. The hand
  2. The knob

the contracts:

  1. the hand:
    • turns
    • past a certain point.
  2. the knob:
    • unlatches

With that defined we can now address the design. I have everything that needs to be fulfilled. I can look at the terms and create a design that communicates the contract. And here we go. The design:

1113681_95866849

We can then take the design and discuss if it meets the contracts. And this design does, and has for a very very long time, since about 1878 (first patent). This design, however, introduced a new contract point. Now the hand needs to squeeze. so now the contract is this.

Two systems:

  1. The hand
  2. The knob

the contracts:

  1. the hand:
    • Squeezes – added by design not original contract
    • turns
    • past a certain point.
  2. the knob:
    • unlatches

Now remember this change was not the original required contract. This is a contract item added because of the limitation of the design. This becomes important as we go further into this scenario.

Failure to meet terms of contract

So along came the car, and with it grease monkeys. Which I happen to be one. One thing that I hated was trying to open a door with greasy fingers for two reasons, First, I didn’t want to get the door knob dirty, the second, I couldn’t get a grip on the knob to open it.

So we have identified one situation where the contract fails. Greasy hands. It fails for two reasons. I can’t grip because of the viscosity of the substance on my hand, or I don’t want to touch it with my hand, thus not getting a grip on it. This is an easy way to determine contract points too, find the failures.

Also, in the not to distant past, there was a movement of thinking that the voice for the disabled population should be more important. In our case the voice of those who cannot meet the contract.

This is where this method of design really shines, identifying the point where the contract cannot be met. If you can say that the requirement is to turn the handle so far we can start asking the question who cannot fulfill this contract. What then happens is that the contract separates from the design.

Once we have identified the failing we have two options. The first is the most common, but unfortunately the least effective.

The first option – add an interface.

This option is used over and over. I’ll describe it in terms of the door knob then show, generically, a process in the real world.

So someone sees that amputees cannot open the door. They say, ok, well, let’s add another system that needs to interact here.

So now we do this:

Three systems:

  1. The hand (or gripper)
  2. The knob
  3. The stub

the contracts:

  1. the stub:
    • put force in linear direction or allow for squeezing motion
  2. the hand (gripper):
    • Squeezes – added by design not original contract
    • turns
    • past a certain point.
  3. the knob:
    • unlatches

Now the contract has been augmented. We have another system, that needs to meet the requirements on another system. So here are the interfaces. The stubb needs to contact a plastic or other type of piece in a solid way to support the force placed on the end of the piece. The end of the piece needs to squeeze the door knob to allow for a rotational or lateral movement, then we enter the original contract, then the piece will turn the knob a certain amount which then the knob will unlatch.

A quick drawing of such solutions.
IMG_5362 copy

This adds a lot of complexity and is usually not the best solution. We need things to be simple. Here is a scenario of a process I have been thinking about recently.

A user collects data from a group. That data reflects experiences the group has had. This process started many years before the computer. It was paper and remains paper to this day. As part of the instructions it asks the user to print out data from our systems and mail it to us. There was a software piece built to enable the transfere of the paper information to a digital system in a little easier fashion. So data gets printed, mailed, then reentered into the same system is was pulled from. At times there are over 70 lbs of paper being shipped from all over the world at a huge cost.

So we added an interface and a lot of complexity. The process included paper, to facilitate the contract it needed to be mailed. The functionality was added that the data was in a central area, but the contract wasn’t changed. The process was changed to meet the initial contract. So they added an interface instead of removing a contract point. Mailed instead of queried.

So back to the doorknob.

We introduced a contract point because of a design limitation. Everyone was ok with that because, back in 1878 people weren’t thinking about the disabled, maybe because a much larger percentage of people with amputations and disabilities didn’t live long. Maybe because people just didn’t think about it much. But either way when the need arose we changed the interface not the contract. So we come to our second possability of solution.

Second option – readdress the contract.

So we do this:

Two systems:

  1. The hand
  2. The knob

the contracts:

  1. the hand:
    • Squeezes – added by design not original contract
    • turns
    • past a certain point.
  2. the knob:
    • unlatches

Whether that was introduced by a design or a designed feature in the beginning doesn’t matter, either way we can remove the contract point and readdress the design. This would stop the cycle of appending interfaces to fix problems. This process cuts to the center and allows a simple path for the simplification of products and processes.

And there we have a design that removes the contract point of squeezing and this style of door knob is growing in popularity for all applications.

881612_51693395

Communicating the Contract

So know we have a solid contract and we want to create a solid design. From earlier we know that we want to introduce as little contract points as possible through the design. We also need to think about how to tell users what the contract points are.

It is much easier to communicate the contracts when we know what they are. Take these for example.

Bad communication:

IMG_0609
what is the interface?
Two systems:

  1. Person needing to Potty
  2. Sign directing person to Potty

the contracts:

  1. The Potty Person:
    • see the sign
  2. The Potty sign:
    • point to potty

Where does it fail? The location of the person determines the effectiveness of the arrow. I guess, however this doesn’t fail if, the corner is the potty, or there is some sort of star trek teleportation system, fear of both kept me from walking into the corner.

push-pull-door-signs-2
image from http://www.signservice.ie/

what is the interface?
Two systems:

  1. Person
  2. Door

the contracts:

  1. The Person:
    • apply force
  2. The door:
    • open

Where does it fail? The direction of the force in a limitation of the design. To overcome they added another interface, now we have a system of understanding the direction the force needs to be applied. The problem is that the design wasn’t readdressed. Instead a sign was placed. A simple solution may be to have a pull handle only on the side that should be pulled, and a plate on the side that should be pushed, eliminating the need for the second interface, the sign. Or you could resign the door to overcome the limitation of the direction being a factor and making the door open on a push or pull.

Good communication:

Glass-cup_155353

image from promotionalpromo.com

what is the interface?
Two systems:

  1. liquid
  2. glass
  3. person

the contracts:

  1. The Liquid:
    • move to contianer
  2. The glass:
    • keep liquid in container
    • until needed to be removed
  3. The person:
    • grasp
    • tip
    • enjoy

Of course this is overly simplified, but here we have three systems interacting. Liquid to a glass, and glass to a person, and liquid to a person. Why has this been around for so many years? and in so many cultures? because it is simple, easy to use, and communicates it’s use effectively. Part of the successful communication is the fact it is so ingrained into cultures. But looking at the design you can see what it’s purpose is.

Conclusion

To wrap up this article I want to recap and bring a few points out.

First, an interface is “an interaction point between two systems regulated by a contractual agreement.”

Why the contract? Well, it is simply a mechanism to quickly and effectively identify the parts needed to interact. These rules exist, in nature and in human made experiences. How do you get a banana? Peel and shove. What if I can’t fulfill one of those requirements? No banana. Any point where two systems interact is an interface, is a contract. Again, if I want you to read this article, you need a computer, need to see the article, and need to understand my language. If you don’t fulfill one of those contract points, no article for you.

Second, readdress the contracts

To build a simple lean interface simplify the contract rather than building more interfaces. It is easy to try and add something to the mix, like a plastic appendage to open a door knob, but the better way is to change the contract and then design to the new contract.

Third, A good interface needs the contract communicated by the design.

The interface itself needs to communicate the contracts otherwise you might end up with people “relieving their waters” in a corner somewhere.

Signs

This was a fun project that I did back in the day, I came across them and remembered how much I loved them. So I am going to post them.

The idea of the project was to take a phrase and represent it as a road sign. Some of these I want to make into a t-shirt.

Being who I am I was content with just a road sign so I tried allow for an interaction between life and the road sign. I think they turned out well.

Graduation Illustration

I just liked the way that this illustration turned out. So I wanted to post it up :) .

This illustration is for use with the 2NAU orientation that I am designing / developing. This is made to be a “insert face here” type of illustation with a very simple graphic.

Beautiful, accessible Forms

So, I have done a bit of research on forms. Trying to make them as happy as possible for design, accessibility and usability. It seems that, as important as forms are to the web, there would be some agreement or idea and the best way to accomplish this. There may be, but I didn’t find it, so I created one. This is an HTML and CSS contract to make the forms happy.

So, here is the basic HTML example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="form">
    <fieldset>
      <legend>Main Title</legend>
      <ol class="formlist">
        <li>
          <label>Label:</label>
          <div>
            <asp:textbox runat="server" id="txtExample" ></asp:textbox>
          </div>
          <hr />
        </li>
        <li class="submitcontainer">
          <asp:button runat="server" id="btnExample" onClick="btnExample_OnClick" text="Submit" />
        </li>
      </ol>
    </fieldset>
  </div>

These examples are using C# so the div tag is a div class=”form” instead of just a form tag. This is because C# / asp.net uses a huge form tag the covers the whole page. I am not commenting on that at the moment maybe later.

and here is how it would render as plain HTML

There are several simple advantages to this form layout. First is the accessibility features. This taps into the screen readers default handling of fieldsets and ols to make navigation easier for them. It also has all the markup necessary, with out extras, to style up the form pretty much how ever you want it. Using the div to separate the label with the control is that you have room to do what ever you need to for the control including placing lots of controls and even embedded forms without any extra work.

There is also a way to add errors and info to the form very easily.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div class="form">
    <fieldset>
      <legend>Main Title</legend>
      <ol class="formlist">
        <asp:panel runat="server" id="pnlExample">
          <li>
            <label class="none"></label>
            <asp:panel runat="server" id="pnlErrorsExample" CssClass="errors"> <!-- the spans or asp:labels may be added dynamically by using this panel -->
              <span class="error">This is a global error message that may be displayed on error that would say, hey this form has these errors: </span>
              <span class="error">You need to type something in the TextBox</span>
              <span class="error">You need to click the submit button</span>
            </asp:panel>
          </li>
        </asp:panel>
        <li>
          <label>Label:
            <asp:RequiredFieldValidator ID="rfvExample" runat="server" ErrorMessage="This is required" Display="Dynamic" ControlToValidate="txtExample" CssClass="error">
            </asp:RequiredFieldValidator>
          </label>
          <div>
            <div class="information">
              <span class="info">This describes the example here.</span>
            </div>
            <asp:textbox runat="server" id="txtExample" ></asp:textbox>
          </div>
          <hr />
        </li>
        <li class="submitcontainer">
          <asp:button runat="server" id="btnExample" onClick="btnExample_OnClick" text="Submit" />
        </li>
      </ol>
    </fieldset>
  </div>

Again, these examples are for use with asp.net controls, but you can easily use this for any language by replacing the

and here is how this would look with no CSS:

what is good about the way that these are built is that it is very accessibility friendly. The global error message is at the front of the form, so screen readers will get to that first. Next the errors are included in the labels of the controls, so as the screen reader introduces what the control is it will also read what errors are related to the controls so the user can know what needs to be fixed without navigating around to find it.

Now lets style these up. I am going to use the theme that I have built for the administration section of NAU Extended campuses but the styles are very customizable and interchangeable.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
.form fieldset {
  margin: 0 0 1em 0;
  border: 1px solid #DDF;
  }
 
.form fieldset legend {
  margin: 0 0 .5em 0;
  padding: 2px .5em 0 .5em;
  color: #036;
  background: transparent;
  font-size: 21px; 
  font-family: "Times New Roman", Times, serif;
  }

.form  ol.formlist {
  padding: 0;
  margin: 0;
  font-size: 12px;
  font-family: "Times New Roman", Times, serif;
  }
 
.form .col {
  float:left;
  width: 49%;
  min-width: 350px;
  border-right: 1px solid #ccc;
  padding-right: 15px;
  }
 
.form .col:last-child {
  border-right: none;
  padding-right: 0;
  }

.form li {
  list-style: none;
  padding: 0;  
  margin: 4px 2px 0 10px;
  clear: both;
  padding-top: 2px;
  }
 
.form li > label {
  display: block;
  width: 120px;
  float: left;
  clear: left;
  margin: 0 15px 0 0;
  text-align: right; 
  }
 
.form li > label.none {
  width: 0;
  margin: 0;
  }
 
.form li hr.none {
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  }
 
.form li > label span {
  display: block;
  }
 
.form li > label span[style*="inline"] {
  display: block !important; 
  }
 
.form li > div {
  margin: 0 0 0 140px;
  padding: 0;
  }

.form li > label.none + div {
  margin: 0;
  }
   
.form hr {
  margin-top: 2px;
  clear: both;
  border: none;
  border-top: 1px solid #CEE6F7;
  }

.form ol > li:last-child > hr {
  border: none;
  border-bottom: 1px solid transparent;
  }

.form .formlist textarea, .form input, .form select {  
  margin: 0 0 5px 0;   
  }

.form input[type="textbox"], .form select, .form textbox {
  min-width: 100px;
  }

.form .block {
  display: block;    
  }

.form .errors {
  border: 1px solid #903;
  background: #F5D8D9;
  padding: 5px;
  margin-bottom: 5px;
  }

.form .error {
  font-size: 11px;
  color: #903 !important;
  text-align: right;
  margin:  0 0 5px 0;
  display: block;
  }
 
.form .errors .error {
  text-align: left;
  }

.form .information {
  border: 1px solid #090;
  background: #ECFFD9;
  padding: 5px;
  margin-bottom: 5px;
  }
 
.form .info {
  font-size: 11px;
  color: #030;
  text-align: right;
  margin:  0 0 5px 0;
  display: block;
  }

.form .submitcontainer {
  margin: 25px 0 35px 164px;
  padding: 0;
  border: none;
  }

.form fieldset .submitcontainer {
  margin: 15px 0 35px 149px;
  }

I am not going to pull apart everything in the css file, but I do want to mention that it is built to include most possible scenarios including columns.
The CSS file is also built to the standard shown in the post Css Management Standard.

Here is the basic form and the error/info form with the styles in place. You can view source and use as you would like.

Like I said this design is what is used in the Admin section of NAU EC. This way of coding up the form is extreamly customizable which is one of the reasons why it is so good. So Code, Design, and Enjoy.

So, HTML5 anyone?

Ok so I am getting ready for an HTML5 CSS3 demostration on wednesday and so I made a few demonstrations and I wanted to share them here. Go ahead and view source. Have fun.

This is to be viewed in chrome or safari, Firefox 4 might work, it uses flexbox and won’t work in a lot of browsers yet. I am going to give an image of what it is suppost to look like and then the html example. I was going to use some javascript to have it display the correct time, but then I decided not to just so that I could say here is a 100% css3 html clock. So this is a pure 100% html css clock, there are no images involved, just divs, spans, and css3.

Now the HTML:

12
111
102
93
84
75
6

Oh, Ya…

Well, now that I am not teaching I can put stuff on here because I have a little more time.

So I wanted to put up some icons that I made and like. They were created for an error page on the EAN application I designed and Developed. I particularly like the 404 icon.


EAN Icon


EAN 404


EAN 401

Electronic Advising Notebook

The Electronic Advising Notebook is a very fun project. I was able to start the project with an ai file and an old system. Through several stages I took this project to mach-up to basic prototype to full scale system. The comment grid system needed a lot more functionality then I could get out of any control so I needed to hand code the javascript/html/css to get the right results. The whole project is line after line of custom javascript/jQuery. I designed the user interface to fit in several different “wrappers” to fit in and stand out.

The backend is build in C# and we used a lot of linq with generics. Great combination. This has been a really fun project to work on. I may find some post dealing with the components created in the system such as custom, generic modal windows.

Get Adobe Flash player

Illustration, first

well, Here is an illustration that I worked on for about an hour. I found an illustrator that I liked the style and tried to learn from it. Those of you whom I have talked to about my illustration know that I have had a hard time doing an illustration because of my background as a fine artist. I have spent years training myself to draw what I see and to remove “symbols” from my drawings. Well Here I am trying to take what I see and create symbols, this has been a real challenge and this illustration is about a year in the making, I know it may not seem like much, but to me it is a landmark.

The most obscure bug I have ever seen

This is a webkit bug, and one of the weirdest I have ever come across. If someone has this problem they will really like this post if they find it.

here is the problem.

View the weird bug

so what is happening when all these several item come into place, probably kinda like a planetary alignment that happens like once in 500000 years, there is an unexplained horizontal scroll bar that appears for no apparent reason. I still don’t know the reason but I know the solution.

the item that need to come into place:

  1. a container for the ol that has an overflow auto, and of course a reason to scroll
  2. a label in the li that is floated left – not right
  3. an hr under the label that has a clear
  4. and the hr needs to have border: none;
  5. and finally an empty span by the hr

crazy huh! like I said it is very obscure.

The fix, really, remove any one of these 5 items. what I did to make sure that I always have one of the five removed was to put a border-bottom: 1px solid transparent; on the hr I wanted to look like it wasn’t there after the border: none;. And there you go a solution to a crazy weird bug.

Here is the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<style type="text/css">
        #studentinfo {
            height: 200px;            
            overflow: auto;
            }    
     
    .form li > label { 
      float: left; 
      }

    .form hr {
      clear: both;
      }
     
    .form li:first-child > hr {
      border: none;    
      }
   
    /* only for legebility - nothing to do with the bug */ 
    .form li > div {
      margin-left: 200px;
      }
    .form li {
      list-style: none;
      }
</style>

  <div id="pnlStudentInfo" class="form duo">
      <fieldset>
            <legend>legend</legend>
           
            <div id="studentinfo">
                <ol class="formlist">
                    <li>
                        <label>label for empty span:</label>
                        <div>
                            <span></span>                                              
                        </div>
                        <hr />
                    </li>
                    <li>
                        <label>label:</label>
                        <div>
                            <span>non empty span</span>
                        </div>
                        <hr />
                    </li>
                    <li>
                        <label>label:</label>
                        <div>
                            <span>non empty span</span>
                        </div>
                        <hr />
                    </li>
                    <li>
                        <label>label:</label>
                        <div>
                            <span>non empty span</span>
                        </div>
                        <hr />
                    </li>
                    <li>
                        <label>label:</label>
                        <div>
                            <span>non empty span</span>
                        </div>
                        <hr />
                    </li>
                    <li>
                        <label>label:</label>
                        <div>
                            <span>non empty span</span>
                        </div>
                        <hr />
                    </li>
                    <li>
                        <label>label:</label>
                        <div>
                            <span>non empty span</span>
                        </div>
                        <hr />
                    </li>
                    <li>
                        <label>label:</label>
                        <div>
                            <span>non empty span</span>
                        </div>
                        <hr />
                    </li>
                    <li>
                        <label>label:</label>
                        <div>
                            <span>non empty span</span>
                        </div>
                        <hr />
                    </li>                                                                  
                </ol>                        
            </div>
        </fieldset>            
    </div>

So I wanted to put some CSS stuff I learned here.

I just learned about this and wanted to put it up here.

the “box-sizing” property. A little background, this is basically a property to bring the style into or out of the box model. So say I have a div with stuff in it. I give that div some padding of 15px and a 1px border and make it nice and pretty, then decide to make two columns so I give it a width and float it, fine right. Well, IE likes to say, if you give me a width I am going to include that width in the border and padding. So a div that is 200px wide will be 200px wide. Every other browser does it like this, you give me a div and a width I will apply the width to the content section of the div and then put your padding and borders on it. So a div that is 200px wide with 15px padding and 1px border that gives me a total space that is 232px wide.

There have been people say that both are right and I am not going to get into that here except to say that I am with the second, non IE, way of doing thing, not because I can’t say IE is right but because I feel the second is the correct way to do it.

Anyway, This takes care of that problem by giving the control to the authors. box-sizing takes two values – border-box and content-box. Content-box is the standard for the CSS2.1 spec this is the second above where the width effects the content rather than the whole. Border-box is what IE does taking the width from the outer most element the border hence the name.

So the argument can stop and people can be happy once again! – for reference see - CSS3 spec

Great Quiz

Do you think you are a font rock star take the quiz –

ironicsans – helvarialquiz

Apple Desktop Background

I saw my coworkers desktop that had a lot of folders and other icons and I got this idea for a desktop background. Enjoy.

Illustrator text Vertical Align

So I just googled this and read some pretty bad articles on how you can’t vertically align your text in illustrator. I say bad because of the attitude of the person writing the article. Not because of what they were accomplishing. Anyway, I just wanted to write a little snippet on how to accomplish vertical text align in illustrator.

Update: I just want to put in a little update here. I noticed in a few forums people wanting to use vertical align and a little frustrated at why they can’t. The reason is that Illustrator isn’t a layout application (and neither is photoshop) though people use it for that purpose. InDesign is the layout application and yes InDesign has vertical alignment of text boxes. Workflow is vital when designing with adobe. My workflow is like this, in case anyone cares :) , photoshop is strictly for raster image manipulation. Things like digital painting, changing photographs, ect. are done in photoshop. I use Illustrator for vector illustrations and simple single page layouts such as posters or website comps. InDesign is used for multi page layouts. I use the “place” functionality a lot when the areas overlap each other. End of my rant.

First, you need to decide what you are aligning your text with. You can’t, be very definition, align something to nothing, or even itself.

So here I have three text boxes next to three image holders.

Now I want the text to be centered vertically with the image holder. (Note that my bounding box is close to the edge of my text). So I select the two Items I want to align and use the “align” pallet.

And now just click the right selection.  You also might want to play around with the “align to” area in the bottom right part of the palette.  Also to note is that when you have at least two objects selected the icons in the align palette show up at the top in the toolbar.

And that is how you vertically align text. The trick is the change of mindset, don’t align the text to the text area, but the text area to something else.

@font-face and google api

So, we all know the problems with fonts on the web. I just needed to enter the vast supply of font articles out there with this one. Because those old font problems aren’t valid anymore. And a few of the old tools like Cufon and Sifr don’t need to be used anymore.

the Google @font-face

So first I want to mention a little about the ‘new’ google API that allows the use of a selected number of fonts. I do want to mention here that the google API for the font selection is really pretty cool, if you look at the guts of it what they are doing is the @font-face but with some cool stuff behind the scene. They are using the @font-face declaration but the file it points to is a url that, I am assuming because I haven’t looked at that page yet (I did check it out and this is exactly what it does.) takes the browser that you are using and delivers the font type required for the browser.

here are a few places you can go.

Here is the embeded font

1
2
3
4
5
6
7
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
.font {
         font-family: 'Tangerine', serif;
         font-size: 48px;
         }
</style>

It really is that simple!! Really great tool.

the @font-face

So, this in my opinion is the greatest thing since string cheese. This is amazing … if it was all done, implemented, and had no strings attached. There are several problems here but aren’t too hard get over. So here are the “strings”

  1. Copyright

    this is the most important problem. When you put a .ttf file up on the web at a location that the css file can get to, you would be hard pressed to keep the file away from those who view your site. The makers of Garamond, Helvetica, Futura, and most others don’t really want to give away their fonts. So we would be limited to most free and open source fonts. But that is a huge variety, though you won’t have your favs there.

  2. Browser Support

    Previously this was the biggest issue, each browser had a different way to use fonts. But now it is only one extra line of css code. So this isn’t much of an issue anymore. There are still some problems like the iPad / iPhone / iPod touch and the Android phones. But all in all it is much better support. So here is that extra line of code I was talking about (and that includes a few extra steps.)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@font-face {
    font-family: 'AlteHaasGrotesk';
    src: url('/fonts/altehaasgroteskregular-webfont.eot');
    src: local('?'), url('/fonts/altehaasgroteskregular-webfont.woff') format('woff'), url('/fonts/altehaasgroteskregular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

@font-face {
    font-family: 'AlteHaasGrotesk';
    src: url('/fonts/altehaasgroteskbold-webfont.eot');
    src: local('?'), url('/fonts/altehaasgroteskbold-webfont.woff') format('woff'), url('/fonts/altehaasgroteskbold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    }

/* to use it */

.cssFont {
    font-weight: normal;
    font-style: normal;
    line-height: normal;
    font-family: 'AlteHaasGrotesk', serif;
    font-size: 34px;
    }
.bold {
    font-weight: bold;
    }

.bold:hover {
    color: #369;
    }

The “Font-Face” Font
Another sample now in Bold

one of the best tools I have found is this: Font Squirrel
They have a great selection of open source commercial fonts and the tools to use for all browsers including .eot for IE and they convert it all for you. This makes it really easy to use the @font-face tool!!

Conclusion – there is no reason everyone shouldn’t be using this right now!

Human running/walking vector

Here is a simple illustrator person broken in to objects. A man, woman, running, walking, and posable. Enjoy! (Here is the ai file)