Group items tagged

Another valuable plug-in that helps ease the transition between Photoshop compositions and browser compatible CSS is the free, cloud based plug-in from css3ps.com. One of the main reasons that many designers work with Photoshop is the control you have over layers and shape elements. Being able to easily and quickly experiment with shadow, glow, colour, texture, rounded corners and more is almost second nature to most and something that even experienced designers struggle to replicate exactly in the browser. For those, this plug-in is perfect as it lets you create your compositions in the way that you know best but then let’s you easily convert your shape’s styles into browser compatible CSS3. This method is ideal for designing buttons, navigation or anything else that you may have styled a shape for.

Go Easy Also, limit yourself to only a few typefaces. If you can get by with two, do it, if not, stop at three. In all but the most experienced hands, lots of different fonts wreak havoc on the cohesiveness of a design. It’s easy to end up looking like a kid who just discovered the font menu in Photoshop for the first time.

Allerta & Crimson Text Allerta is a moderately bold sans-serif with a personality. If you don’t want something boring or something crazy, it’s a good middle ground that looks great in both a headline and body copy. Crimson Text is a straightforward font with strong serifs but little to no differentiation between the thicks and thins. This makes is retain a good amount of readability even when its small.

Molengo & Lekton Molengo and Lekton together feel like an old school attempt at a technical feel. Largely due to the typewriter feel of the latter of these. This combination is something I would expect to see on a website with a parchment texture background along with photos with a polaroid effect and maybe even some coffee stains.

Old Style serifs (also called humanist) are the oldest typefaces in this classification, dating back to the mid 1400s. The main characteristic of old style characters is their diagonal stress (the thinnest parts of the letters appear on the angled strokes, rather than the vertical or horizontal ones). Typefaces in this category include Adobe Jenson, Centaur, and Goudy Old Style.

Transitional serifs date back to the mid 1700s, and are generally the most common serif typefaces. Times New Roman and Baskerville are both transitional serifs, as are Caslon, Georgia, and Bookman. The differences between thick and thin strokes in transitional typefaces are more pronounced than they are in old style serifs, but less so than in modern serifs.

Modern serifs, which include typefaces like Didot and Bodoni, have a much more pronounced contrast between thin and thick lines, and have have a vertical stress and minimal brackets. They date back to the late 1700s.

Slab serifs have little to no contrast between thick and thin lines, and have thick, rectangular serifs, and sometimes have fixed widths. The underlying characters hapes often more closely resemble sans serif fonts.

Weights & Styles Within the majority of typefaces, you’ll find more than one style and/or weight. Weights are often classified as “light”, “thin”, “regular”, “medium”, “bold”, “heavy”, or “black”. Each of these refers to the thickness of the strokes that make up the characters:

There are three general styles you’ll find with many typefaces: italic, oblique, and small caps. Small caps are often used for headings or subheadings, to add variety to your typography if using a single typeface. Italic and oblique are often confused or used interchangeably, but are two distinct styles. Oblique type is simply a slanted version of the regular characters. You could create this using the “distort” function in Photoshop, although sometimes a separate oblique font is included within a typeface. Italics are slanted like obliques, but are actually a separate set of characters, with their own unique letterforms.