1. Apr 20

    Designing with Typography

    I am currently working on a project which for political reasons will not be using a lot of illustrations. The reason is that illustrations tend to communicate particular norms and values, as well as being open for ambigous interpretations. For a website on a complex and politically sensitive topic, which does not want to be perceived to express any partisan views, it may be smart to stay away from non-abstract graphics which can be interpreded to carry meaning that was not intended.

    So, based on these restrictions I am looking at using typography to make the website interesting and pleasing to the eye.

    Finding the right Font

    There are several nice tools online that helps you find and compare font types. Here are some of the ones I like.

    flippingtypical lets you easily view and brows through the fonts you already have installed on your computer.

    fontbrowser lets you brows through and preview a long list of font types

    fontsquirrel and dafont are great places to download free fonts

    Manipulating Typography with CSS

    When you think of it there are surprisingly many aspects to typography that can be manipulated with CSS. Speckyboy.com has more information regarding CSS web safe fonts and font sizes in different measurement units. There are several tools available online for you to play around with these CSS settings. Below are some nice ones:

    typechart provides charts and downloadable CSS for web safe fonts combined with various CSS font settings

    fonttester lets you define several typographies, view them, and compare them side by side, and download the CSS

    Manipulating Typography by Dynamic Image Replacement

    If the CSS options for manipulating typography are too restrictive for your project there are several ways of using Javascript, Flash, or PHP to dynamically replace text in headers etc. with images depicting fancier fonts.

    I will get back to this more in detail in a later article. Now I have to work on my typography website design :)

    Expanding Font Options by Including Fonts on the Server Side

    Instead of using techniques generating images to replace fonts, as mentioned above,  you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally.

    Share/Save


  2. Oct 29

    A Look at Web Design Genres

    Web design trends changes as new techniques are introduced and browser technology evolve, but there seem to be certain central themes that are somewhat consistent.

    Minimalism and Functionalism

    Minimalistic web design focuses on content and function, and tones down the use of graphics. The layout is often very structured and design elements like position, size, color, and typology is used to emphasis the content.

    A great example of minimalist and functionalist web design is A List Apart which uses limited graphics and color, a simple grid layout, and a slight variation in typology for subtle emphasis.

    Click to continue reading “A Look at Web Design Genres”

    Share/Save


  3. Oct 25

    My very first Word Press Theme

    Today I have finished my very first Word Press theme. Well, I guess you can question whether its actually finished as I have a tendency to never be entirely satisfied with something I’ve been working on. There is always just a couple of things that need to be improved…

    I learned quite a bit about Word Press, which was one of my goals, besides making my very own original Word Press theme for my brand new blog :)

    My inspiration for the design was the pretty colorful  design at Web Developer Wall, and their post on how to make a web design based on a CSS Large Background.

    Click to continue reading “My very first Word Press Theme”

    Share/Save