When it comes to typography, webdesigners always have very limited options. We are bounded to use of few web-safe fonts and there is only a limited space for us to go nuts if we want to achieve something really different. Luckily enough, there are some tools that can make this aspect of our professional life a little bit less depressing – so called “font replacement techniques”. Once again, after flash-based sIFR and JS – powered Cufon, a not so new technique is gaining its fans an user – @font-face. And here some corporate fonts that should not be missing in your toolbox.

1. Titilium text

Titilium is clean, sharp and modern sans-serif typeface that can be used in variety of different projects. It comes in 6 different styles, very handy.

2. Sansation

Great and modern typeface with very nicely shaped glyphs. Great choice if you want to achieve Different, yet very cool and professional look.

3. League Gothic

This bold font is ideal for presentation of your heavy ideas. If you want to look big, confident and stylish at the same time, go for  League Gothic.

4. Quicksand

Another great corporate font with more rounded glyphs.

5. Bitstream Vera Sans

Bitstream is very universal typeface, that can be used for just about anything.

6. Bebas

Bold and confident typeface, with similar properties as League Gothic.

7. Bentham

Don’t forget about Serif fonts. Bentham is perfect choice, if you’re looking for serif alternative.

8. Existence light

Ultra light corporate font, with variety of possible aplications.

9. Garogier

Another absolutely perfect serif typeface.

10. Aurulent Sans

Our list ends with this gorgeous sans-serif font, which made its away int our post thanks to its great symmetry and sharp corporate look.

Did you like this list? Do you have your own candidates that should be included in it? If so, comment this post and let us know! If it is cool enough, we will include it in next round-up.

We decided to give away a complete html version of our Premium WordPress theme iMag. With very versatile design, we offer this template in 18 (!) different color and background combinations. This is not a competition and every single one of you can download this template for free, all you have to do is following:

1. Make sure you follow us on twitter. If you dont, you can do so here.
2. Retweet this post by clicking on the green RT button on the left.
3. Click on this link and after verification, your download will start.

You can use this template in your personal and commercial projects without any restrictions, just make sure you do all of the above. Stay tuned for more great freebies to come. Oh yes, and spread the word!

Recently we’ve discovered a problem  in one of our WordPress themes that we sell on ThemeForest (Colosseum). It was really strange in that it wasn’t reproducible on my local machine and it variably appeared and disappeared depending on the permalinks settings in WordPress.

We had a portfolio, which was done as a Custom Post Type with custom taxonomies and all, and we had it routed through a custom page template. The problem was that either paging would not work (e.g Second page gave 404) or you could not view individual portfolio entries (they gave 404s too). These two problems would alternate whenever you’d refresh permalinks (Settings>Permalinks>Save).

As it turned out after some research, you can’t have the same slug for a page and a custom post type! The moral from this is that you should always prefix your custom everything with your name or something to ensure that you’re not conflicting with anything else.

Happy coding

Hi and welcome to the Modern business website from scratch series. In todays first and opening article, I’ll guide you through the first and crucial part of website development – the psd mock up and design. This article is written as a step-by-step tutorial and all the files that will be part of our workflow are included – including the final psd (because lets face it, everyone love freebies).

So let’s take a look at what we will be creating.

Now, for those of you who are only interested in psd, download button is located at the very end of the article (evil, right?). For the rest of you, let’s kick it off.

1. Preparing the PSD

We will start by preparing the right PSD file with good proportions, grids etc. This is very important and may save us a lot of time at later stages, especially when dealing with large project with lots of elements. I personally always use PSDs from Nathan Smith’s 960.gs grid system – they come in 3 versions – with 12, 16 or 24 columns. As for the size, they are 1020 x 1020px, with wrapper area being 940 px wide. I strongly recommend to download them, as I am about to use them for this tutorial.

After the downloading the package, locate photoshop folder inside the templates directory, and open 12 column version. You should see something like this (without the legend of course).

As you can see, whole PSD has the dimensions of a square with side of 1020 px. Wrapper is 940 px (yeah, sorry for wrong legend) wide – this is very important because we still have to optimize for 1024 x 768 and 940 is the width that looks just ok on this resolution and does not look lame on bigger screens. If you take closer look at the PSD, you will see that wrapper is divided in 12 columns, each of 60px. Gaps between these columns are 20px wide.  This comes very handy when designing the layout and it is the main reason why I love 960.gs’s PSDs. For now, you can turn them off ( click on the little eye icon next to “12 col grid” folder in layers pallete ). Blue guides can be turned off by unchecking View -> Extra.

We will continue with setting up the grid. Grids are very helpful and if you use them right, they can save you a lot of time and trouble. I usually always use grids with cells of 10 x 10 px. I really don’t know why to be honest, it just turned out to be very beneficial size for me and I got used to it. I recommend trying different options for this and finding out what suits you best. You can set up your grid at Photoshop -> preferences -> Guides, Grids and Slices… . Here is the image of my settings:

Now that the PSD is ready, we can actually start creating our layout.

2. Fonts and color scheme

As for the fonts, I decided to go with League Gothic (check it out here) for headings, mainly because of its bold and professional look, with a slice of retro feeling inside. For the body text, we will use good old arial (I’ll get to the font size and line heights later).

Our color scheme in this design will be pretty simple. We will use one plain color for background ( #eeeeee ), one plain color for boxes background (#ffffff ), one color for headings ( #111111 ) and one for links and elements that you (or your client) wants to make “pop” ( #b2252C ). I prepared visualized example of our color scheme as well. If you feel like changing any of  my colors for your own, feel free. Experiments are often very productive. Very nice and popular source of inspiration can be also kuler.adobe.com.

3. Background

Our background color for this layout will be #eeeeee. Select your background layer. Now go to edit -> fill or press shift + f5. Select color from dropdown and select #eeeeeee. Confirm by clicking OK.Thats it for backround, we will continue with logo and navigation.

4. Logo and tagline

Our header will consist of simple textual heading and subheading with some subtle effects. You are most probably going to change this to your personal needs. If you like my design, just change the text but feel free to insert your own logo as well.

As I said earlier, I decided to use League Gothic for the headings. (if you did not download it earlier, now is a good time).

Turn on your 12col group layer in layer palette and turn on the grid as well ( cmd /ctrl + ‘ ). You should see 12 red columns. Use type tool (T) and type WebDevKit Company (or whatever you want . Select whole text again, by double clicking its layer. Make sure the size is set to 44pt and color to #111111. Place it right at the left border of the wrapper and set its margin from top to about 60px (6 squares ). See following graphic for clarification:

Our tagline’s color will be a bit lighter ( #565656 to be precise), and we will give it nice inner shadow to make it more attractive. Again, type your tagline, set it’s size to 30pt and color to #565656. Make sure it’s right border is aligned with the logo above:

In the next step, we will add a nice inner shadow to our tagline, this will produce a soft letterpress effect. To do this, right click on the tagline’s layer and select blending options from the menu. Check inner shadow and change it’s properties to this: Angle – 90, Distance – 1, Size – 1. Thats it

5. Navigation

Navigation consists of simple textual links. Our font is (again) League Gothic. Make sure your font size is 24pt and color #111111. You can use our red color ( #b22230 )  for any page that requires special attention. I used it for contact information but this is basically up to you. Spacing between navigation elements should be 30 px.

6. Billboard

The whole idea behind billboard is to make visitor know the very basic facts about your product or company within first few seconds of their visit. If you succeed in capturing their attention during this very brief period of time, they may turn into customers. Here is the basic structure of our billboard:

• Heading: Welcome message or some important service, maybe quotation
• Text: a brief welcome text or description of the above.
• Call to action buttons: very important buttons that can be used to redirect user to order / pricing / more info page.
• Graphics: Nice, eye-catching graphics related to elements mentioned above.

First of all, we need to create the background. To do this, create new layer ( Layer -> new -> Layer or cmd + shift + N ), name it billboard bg. Select 940×340 px area 50-60px below the tagline. Click on Edit  -> fill and fill it with plain white. You should get something like this:

This color combination of background / billboard background does not provide enough contrast, but don’t worry. We will take care of this with fancy shadow.

Duplicate the “billboard bg” layer (Layer -> Duplicate layer ). Name it billboard shadow and move it below the original “billboard bg” layer. CMD+click the thumbnail of the layer to select filled parts. Go to Edit -> fill, and fill this selection with black ( #000000 ).

Press cmd+D to deselect and go to Filters – > Blur -> Gaussian blur. Set radius to 10px.

Contrast is better, but it still looks kinda amateurish and lame, so we will enhance it a bit more. Keep the shadow layer selected and click Edit -> transform -> warp. Move the lines in the direction signaled by red arrows, until you get something similar to our picture. There is again a lot of space for your own imagination and preferences. Some prefer shadows dark, some subtle. I tried to go for something in the middle.

That is much better. Now we can start to fill the billboard wrapper with content. Let’s start with heading and description. Our billboard will have the padding of 40px. This means that we will “apply” 40px wide invisible border around content of the billboard.

Heading should have following properties:

• font: League Gothic
• font size: 40px
• color: #111111

To add description text, select type tool click 40px below heading with 12col layer group selected and create text field that ends with the 6th column (yes, one half). Fill the text with your text. Properties for the description text.

• font: Arial,
• font-size: 13pt
• line-height: 21pt

Right half of the billboard is reserved for some nice photos or illustrations. We used illustration of various it-related icons.

Following image shows positions of our elements.

7. Billboard buttons

Create New layer and name it “button background”. Select Rounded Rectangle tool (u) and create shape with dimensions 140×40 px. Right click the layer and click blending options. Check gradient overlay. Set Angle to 90 degrees and choose linear gradient. As for the colors, we start at #e8e8e8 and end at #f4f4f4.

Now, check the drop shadow option. Set Distance and Size to 1.

Create new layer and name it button circle. Hold shift and create cirular selection with 20px using Eliptical marquee tool (m).

Click Edit -> fill and fill the selection with #222222. Right click the layer and click blending options. Check Inner shadow option, set distance to 1 and keep size at 5.

Create New layer and name it button arrow. Use Polygonal lasso tool (L) to create the following triangular selection:

Go to edit -> fill and fill the selection with white color.

For button captions, I decided to choose Titilium as my font ( more info here ). I used 800wt version with font size set to 15pt. Color was #111111. When choosing the right position for the caption, make sure there is at least 20-30px wide gap between it and dark circle with arrow. In blending options, check drop shadow option. Set blend mode to normal, color to white, distance to 1 and size to 0.

Great, we’ve just made a really sexy button. What you want to do now is to put all layers related to button into one group and name it button. You can duplicate this group and change the text of the second button easily.

Congrats, billboard is done, it should look similar to this:

Icons come from absolutely fantastic  iSuite Reworked set from Prax_08.

8. Content area

Our main content area consists of 3 columns with heading, image, description and learn more link. It’s background will be practically the same as the one that we used for billborad, so feel free to duplicate “billboard shadow” and “billboard bg” and rename them to “content shadow” and “content bg” if you are looking for easy solution. If you need bigger size of the content wrapper, just repeat the steps mentioned for billboard and use different height. If you are done, place this content wrapper 40px below your billboard.

Turn on your 12 col grid layer group. Basic layout for our columns will be following:

Each column is about to be filled with:

• heading
• image
• description
• learn more link

For headings, use League Gothic with following settings: size – 28pt, color: #111111. Size of each image is 250x70px except the one in middle column which has the width of 270px. Description text is 13pt Arial with 21pt line height. Top and bottom margin of image should be 30px. Learn more links are made with League gothic, size 20pt.

Once you are done, your layout should look similar to this:

9. Footer

Our footer is really simple. It consists of one line of copyright text and social media icons. It is really easy to do, I provide you with the screenshot:

Icons are from Murid Rahhal’s Metallic social icons set 01 set.

We are done . You can download the final PSD by clicking the button below.

That’s it folks! You’ve just created neat and universal design. Stay tuned for part 2 of this series, in which we will cut the whole thing into a modern W3C valid XHTML / CSS Site! Make sure you don’t miss it and follow our twitter.

In this tutorial I will walk you through some basic techniques that will come in handy if you are interested in reducing your website’s size and load time. Generally, if you style a markup, you go element by element and assign style to it. That is not bad, and usually will work, but you often can reduce the amount of properties you include in a selector. Here I will show you how to do this.

1. Always start with general elements first

Start with body selector. Set your fonts and font sizes here and do it first, if you change it later, it will affect all text on the website. Next make sure you don’t forget things like p, a, a:hover and a:focus, ol, ul etc.

body {}
p {}
a {}
a:hover, a:focus {}
img {}
ul {}
ol {}
li {}
...

2. Proceed from top to bottom, outside in

You probably have a wrapper around all of your elements, style that. As you proceed from outside in you can fully exploit inheritance – everything you assign to the parent will be inherited by its children. This is useful if you want to have similar looking text in the sidebar. You don’t set text properties on the widget level, you do it on the sidebar level and add only differences (if any) to the widget classes. If you proceed like this it will be really easy for you to find any element style later when you will want to edit the page.

/* Generic Tag Definitions */
/* Generic Classes */
#wrapper {}
#header {}
#content {}
#article {}
#sidebar {}
#footer {}

3. Create generic classes

If you use some things a lot in different places it might be effective to create a dedicated class and then assign this class wherever you want to use its properties. Again, it is good to think of this before you start styling. An example of this might be a ‘box’ class that will have a background color, border, border radius and some shadow. You can then apply this class wherever your box appears, be it in main content, sidebar, footer. Additionally it helps you keep order in your CSS and if you want to change anything, there is only one place you need to go.

.clear {
  clear:both;
}
.alignleft {
  float:l eft;
  margin: 0px 20px 20px 0px;
}
.alignright {
  float: right;
  margin: 0px 0px 20px 20px;
}
/* etc. */

4. Make use of selector Specificity

Generally selectors with IDs have precedence over selectors with classes. Selectors with longer element paths have precedence over shorter paths, classes have precedence over elements, later selectors overwrite former ones. You can use this to override something you specified generally earlier. This is the recommended alternative to !important directive.

Lets assume we have something like:

<div id="menu">
  <ul>
    <li class="page_item"><a href="#">Link</a></li>
    <li class="page_item"><a href="#">Link</a></li>
    <li class="page_item">
      <a href="#">Link</a>
      <ul>
        <li class="page_item"><a href="#">Link</a></li>
        <li class="page_item"><a href="#">Link</a></li>
        <li class="page_item"><a href="#">Link</a></li>
      </ul>
    </li>
  </ul>
</div>

Then we could organize our CSS like so:

#menu {}
#menu ul {} /* Top level menu */
#menu ul li {} /* Top level menu items */
#menu ul li a {} /* Top level menu links */
#menu ul li ul {} /* 2nd level menu */
#menu ul li ul li a {} /* 2nd level menu links  */
#menu ul li ul li ul {} /* 3rd level menu (even though in the markup we don't have one)*/

5. Use selector shorthands

Many selectors have shorthands that combine different values in one property. The ones that will save you most characters are font, background, border, margin and padding.

.class {
    /* Wrong */
    padding-top: 1px;
    padding-right: 2px;
    padding-bottom: 3px;
    padding-left: 4px;

    /* Right */
    padding: 1px 2px 3px 4px; /* Order is always top right bottom left */
}