site typography
This is an example of the typography that i used in the blog portion of my website. It is very basic but classic. While the fonts on web are very limited, i tried to use the best fonts in the best way. I liked this part of the design process because i think that typography makes or breaks a website.
In choosing the type for lawrencefolio.com I had to consider what would be the easiest for the view. I do not have access to mich in the way of web type editing programs so I decided that the best way to render the type was to use the standard fonts that most computers had available to them,
Ariel, Helvedica, (sans serif)
Times New Roman, Georgia (serif)
In the future I hope to be able to use better fonts on the site, but at this point this will have to do.
I chose to use a san serif font for my site. I really like the geometic look and the simplicity of the design.
My first choice would be helvetica.
I kept my type basically to one typeface.
I chose to use Arial and Rockwell. I only used Rockwell in the logo and navigation. But I’m finding it looks really kind of… tweeny? Or something. I’m happy with the Arial. I was having problems with Helvetica, but Arial solved them.
Keeping it simple.
I kept my typography very simple. Mostly because there aren’t that many choices for website fonts, but also because I think it helps keep my site simple and clean. Which is good, because that’s my style. I chose to use Verdana for all of my navigational text, and palatino for the body copy and it’s subtitles. I didn’t want it to be overwhelmingly boring, so I mixed it up with some color. The header navigation text is black, changes to a light teal when it’s hovered over, and turns to white when you’re on that page. The sidebar navigation text is white, it also turns to a light teal when hovered over, and then is underlined after that page has been visited. The third navigation text is dark teal, and turns to the same light teal when hovered over (gives unity, other than the fact that it’s the same font), and will be underlined while on that page. As for the body text, I’m keeping it a simple black, and the subtitles will be teal.
As for typography i am still having a hard time living with he limited font choices on the web but i am working at getting used to thinking in web terms of type.
Helvetica is the main body copy and if not available on their computer Tahoma will be used, then any sans serif font. Regular helvetica is used most often. Bold is used for subheads. Oblique is used for emphasis, and when needed in body copy.
There are only three main types of text used H1, H2 and body copy. H1 is most important and describes what is on the page so search engines can find what the page is about easily. all types can be links, they will be blue. H2 will not be blue even though they will be links. you can tell they are links because an arrow will point to them when you hover over them. The body copy is used for everything besides the subheads and the headers. such as informations on all sidebars and meta information.
The success of my page basically hinges on whether or not I handle the type well.
Walking the line between minimal but still having a visually rich & pleasing website is interesting. Most of the time I spent developing my website was going back and forth between minute changes between type. Like Brother Memmot always says, the difference between mediocre typography and great typography is about 24 hours of finesse (probably more actually).
2 – This is located in the popUP_info div (which has a blue border above it). This is used to state the general reason for the particular page.
It uses the “sc” class style (small caps).
3 – This is a rarely used paragraph, but if the page requires more explanation than the “page purpose” area than this is used for that. It’s in the “about_paragraph” div.
4 – This is in the “Header” tag. It’s a sans serif font and serves as a fall back to getting around the website. The main pages are listed.
5 – The blog area which contains the posts. It’s all contained in the portfolio_item & portfolio_item_content divs.
6 – The font is Caecilia bold and should look pressed into the background.
1 – The title of the article. Inside of an “sc” style tag (small caps)
2 – This is the posts location (portfolio, blog etc) it’s a smaller sanserif.
3 – The tags are right aligned.
4 – This is custom meta data that you insert when making the post. Implements tells which skill were used. And project date is obvious.
5 – Using the post-meta & post-meta-key style rules like many other meta data elements these are small caps and should appear inside of the bubble background image.
6 – The pages base font is Georgia. The body copy is 1 em (base size of 12px).
7 – Sub-titles are h2. 1.3ems italic Georgia.
8 – The preview pictures are 460px wide x 200px tall (pictures seen on the front page. Otherwise they are 460px x 400px tall inside of a blog post. If a user clicks on them preferably they are linked to a 1024×768 version of the picture
For my typography I wanted type that you would notice but that it wouldn’t detract from the rest of the site. I went with Kozuka Gothic Pro to be my main font, because it has a very clean and distinct look that works well with the clean look of the site. I went with Futura for my sidebar, because it had the same feel of the Kozuka but it was a little heavier because it’s part of the navigation. I also added the blue, green, and orange to them to keep up with the style of the site and to unite everything. I also went with Georgia for my basic body and for my blog.
Kozuka Gothic Pro
Futura
Georgia
The typography and imagery are displayed nicely in these mock-ups.
Georgia and Arial Narrow were chosen to be the two main fonts because they are fonts everybody has. This will allow the words to be navigable without using images to bog down the already image heavy site.
The imagery will be design and photo work that I have done. One of the reason the structure is so simple is to put emphasis on the content, these images. Small, square thumbnails are used on the gallery pages and a large space is dedicated to showcase the gallery work.
The about and blog pages are quite similar in structure and will have smaller images, snapshots, scans or whatever that is appropriate to the given content.
Home Page
[/caption]
Gallery Click Two
Photo Click One
Photo Click Two
[/caption]
Blog Page
Here’s some stuff I’ve been working on as far as branding and how I would like certain type and color to be. I’m not entirely sure what to do about typefaces that aren’t as universal like using Rockwell for headers, also I would like some feedback on what I could do to make my body copy a little better. Is Lucida Grande a common font on PC computers?
The Monograph is required reading before the first day of class, but you may also be interested in the 30+ interviews from international web professionals and other resources that the site offers.
