2000 Free Photoshop Patterns


By Brant Wilson

Flowers Patters for Photoshop (6)

Photoshop Patterns

Photoshop Patterns (12)

Leer más “2000 Free Photoshop Patterns”

A Comprehensive Guide to Windows Vista Fonts for Designers

[T]here are no bad fonts — only inappropriate ones.

— Jason Beaird

The majority of computer users became aware of Microsoft Windows Vista on January 30, 2007, when the company released the new operating system publicly.

You and I of course knew about it well beforehand. Once Vista was available for beta, many web designers adopted it early to begin trying — with varying levels of success — to figure out if they can incorporate Vista fonts into their designs.

Three things quickly became clear:

1. They are beautiful typefaces.
2. They are unusually — and, for designers, unacceptably – blurry unless you have ClearType or another anti-aliasing protocol enabled; but there are serious issues with ClearType.
3. With some exceptions, they are markedly smaller in size than most fonts, making them difficult to incorporate into font stacks.

Trust Microsoft to create something attractive and potentially valuable like this set of spiffy new fonts (or an operating system like Vista), and then take steps to ensure they can’t be used easily.

But I like these fonts: they’re beautiful and they are available in many of our user’s computers (as much as 92% of all PCs use Windows as of May 2010[1]). In addition, the design community deserves some thought as to how to use them in their work.

Let’s see what we’re up against.


by Michael Tuck

A Comprehensive Guide to Microsoft Vista Fonts for Designers

[T]here are no bad fonts — only inappropriate ones.

Jason Beaird

The majority of computer users became aware of Microsoft Windows Vista on January 30, 2007, when the company released the new operating system publicly.

You and I of course knew about it well beforehand. Once Vista was available for beta, many web designers adopted it early to begin trying — with varying levels of success — to figure out if they can incorporate Vista fonts into their designs.

Three things quickly became clear:

  1. They are beautiful typefaces.
  2. They are unusually — and, for designers, unacceptably blurry unless you have ClearType or another anti-aliasing protocol enabled; but there are serious issues with ClearType.
  3. With some exceptions, they are markedly smaller in size than most fonts, making them difficult to incorporate into font stacks.

Trust Microsoft to create something attractive and potentially valuable like this set of spiffy new fonts (or an operating system like Vista), and then take steps to ensure they can’t be used easily.

But I like these fonts: they’re beautiful and they are available in many of our user’s computers (as much as 92% of all PCs use Windows as of May 2010[1]). In addition, the design community deserves some thought as to how to use them in their work.

Let’s see what we’re up against. Leer más “A Comprehensive Guide to Windows Vista Fonts for Designers”

Tips for Creating Big Stature With Small Caps

When a web page demands respect from readers, few type treatments give it dignity like “small capitals.”

This treatment makes all letters in a line of text uppercase, but retains hierarchy by making the initial letters of important words noticeably larger.

When used properly, small caps make things look stable and reliable. They can appear official or solemn; stately text is never rushed.

Small caps march to their own deliberate beat. Small caps almost guarantee that text won’t look cheap.

Like any technique, though, this one can be abused or used improperly. Read on for some tips on how to integrate the power of small caps in your designs…


using small capitals in typographyWhen a web page demands respect from readers, few type treatments give it dignity like “small capitals.”

This treatment makes all letters in a line of text uppercase, but retains hierarchy by making the initial letters of important words noticeably larger.

When used properly, small caps make things look stable and reliable. They can appear official or solemn; stately text is never rushed.

Small caps march to their own deliberate beat. Small caps almost guarantee that text won’t look cheap.

Like any technique, though, this one can be abused or used improperly. Read on for some tips on how to integrate the power of small caps in your designs…

Short hand CSS properties…


Lower case ‘a’ from Adobe Caslon Pro, superpos...
Image via Wikipedia

Short hand CSS properties, that must be saving your time while working on any project. Instead of using CSS properties in each line, we can use in single line.

1. BACKGROUND

We usually use following properties in Background.

background-color:
background-image:
background-repeat:
background-attachment:

Normally we use background as:

.backGrnd
{
background-color: yellow;
background-image: url(“stunningmesh.jpg”);
background-repeat: repeat-x;
background-attachment: fixed;
background-position: left top;
}

But if you want to write these properties in Short hand, you will write these properties as:

.backGrnd
{
background: yellow url(“stunningmesh.jpg”) repeat-x fixed left top;
} Leer más “Short hand CSS properties…”

Fantastic Examples of Typography


The principle behind topography is based on the creation of a complete text by reusing identical characters. Typography to define is the art and technique of arranging type, type design, and modifying type glyphs.

This art has a great role in life of graphic designers. I have arranged Fantastic Examples of Typography.

A River Runs Through Them l Fantastic Examples of Typography Leer más “Fantastic Examples of Typography”

Jeff Veen Talks Future of Typekit


A fan of irony, an odd news item grabbed my attention, “The University of Wisconsin at Green Bay is swapping Arial for Century Gothic for their email system. It is believed that students will save ink when they print their emails.

Readers politely posted that this is yet another reason to switch to “Garamond” and debate ensued, and then this guy sketched popular fonts on a wall and measured the ink left in the pen!

Web fonts, cheeky controversy, and constant innovation abound online and offline! Candidly speaking, web fonts, became a hell of a lot more interesting over the past year with Typekit’s release. In fact, Typekit has proven itself a web design game-changer both in business and in rendered page.

Matt Hamm ~ Web designer & illustrator - Guildford, Surrey,  UK_1270568610608

Matt Hamm recently upgraded to Typekit on his site www.matthamm.com. Discovered via @dribbble on Matt’s page

Typekit, a product and business eco-system that blew by the bureaucracy of type vendors agreeing on universal licensing and browsers deciding on what fonts to support, and rapidly and forever changed web design in both beautiful and controversial ways.

We’re well beyond the hype of Typekit’s rollout, the web is full of love letters, lessons, and licensing debates, so I caught up with Jeff Veen (Co-founder of Small Batch Inc, the company behind Typekit) to  take inventory of some Typekit’s greatest effects:

  • Licensing
  • Web standards
  • Web font design
  • Individual challenge of web designers to learn more about type
  • The Typekit ecosystem & API

Licensing? Subscribing to a Constant Soundtrack

A day before I was scheduled to speak with Jeff, Jeffery Zeldman published a great post about Typekit, “My Love Hate Relationship With Typekit” (Dammit.) Of licensing, he writes:

“I have mixed feelings about their product because I’d rather buy a web-licensed font than rent it …. But a one-time font purchase as a line item in a design budget is easier to explain and sell to a client than an ongoing rental charge.”

@Zeldman does a great job exploring issues of licensing v. owning, and I’d rather encourage you to read his words than attempt to resummarize his succinct poetry in my prose. I did, however, bring @Zeldman’s timely post up with Jeff, who explained that he believes Typekit’s model isn’t about a “rent v. buy” proposition.

Typekit, like Spotify, and many other service businesses living in the cloud, is a professional hosted service. Instead of a constant soundtrack of music and lyrics, users have a constant stream of licensed fonts.

As for the issues around explaining an ongoing licensing fee, Jeff admits that he and the Typekit team are continuing to work on ways to help designers do a better job of explaining this proposition.

“Fonts, like stock photography, hosting services, among others, are now part of the subscription service assets that are expected to be packaged as a part of a web build.”

myles-grant-2

Tiny Speck’s Myles Grant (non-designer friendly example!) www.mylesgrant.com. Discovered via @dribbble on Myle’s page

Skirting Web Standards or Towing the Line?

Standards are ingrained in design and design philosophy, it’s understandable then to question how a product that requires a paid subscription might not fully compliment a designer who seeks to practice standards compliant design. Jeff explains:

“Typekit uses 100% standards compliant markup, style, and script. We’ve built a service that sits along side web standards, helping designers and developers focus on creative solutions rather than workarounds and hacks, no matter how bullet-proof they are.”

“It’s a similar solution to how many people use jQuery hosted on Google’s servers now. Everyone who includes the link in their page automatically has the latest stable version, properly minified and gzipped, served from data centers around the world.”

What Has Changed in Web Font Design? Leer más “Jeff Veen Talks Future of Typekit”

A Basic Look at Typography in Web Design


April 7th, 2010 by Shannon Noack

A Basic Look at Typography in Web Design

Typography is an integral part of design. Think of all the different uses of typography on the web, from large headlines and bold blocks of text to smaller-sized text in body copy, and you’ll soon realize that not only is it a crucial part of a web design, but that it’s a pure combination of art and science.

We’ve come a long way since the start of the internet, but the use of typography is as important today as it was back in the day.

Typography Basics

Typography Basics

Typography is the use of type in a design. Typography seeks to create a greater meaning by thoughtful and deliberate selection font, size, color, layout, alignment, and other factors that affect the design of type on a page.

There are two major classifications of fonts to choose from: serif and sans serif fonts.

Serif fonts have serifs or extra embellishments at the end of stokes; some call them feet or tails.

Typography Basics

Sans serif fonts are without serifs; no extra details are found on the end of each letter.

Typography Basics

Things to Consider for Typography on the Web

There are many differences in handling type in print versus on the web. Things to think about with text on the web are contrast, color, readability, and size.

Colors on a monitor screen are created by light, and it becomes more important to think about contrast because it’s straining to look at and read text with poor contrast. Black text on a white background is the easiest to read because it provides the most contrast. Color theory and color choice play an important role in web typography.

Sans serif fonts have been proven to be more easily read online in body copy because serifs make it tougher for the eye to follow, while the opposite is true for printed text.

Although at an increased size and with more leading—the amount of additional vertical space between lines of type—sans serif fonts can still work fine in body text on the web. Serifs work great in headlines and headings because they give a special accent to a headline and because serif fonts are easy to read when dealing with smaller quantities of text.

Size is an important factor to consider when choosing your font styles. Text that is too small is hard to read, but text that is too big takes up too much space. Find a size that works well with your design and is easy to read.

Taking Control of Fonts

There are many settings that control the way your font appears on a web page. Font size, as mentioned previously, is certainly important. The three most popular units of measurements are: em, percentage (%), and pixels (px).

Declaring font sizes in CSS is simple, here’s an example of paragraph elements being assigned a unit of 1em.

p {
 font-size: 1em;
}

Em is a widely used form of typographic measurement for web designs because it scales well and can give you finer increments of size (i.e. 1.35em).

Pixels are measured relative to the screen resolution and give you a bit less control as you can only use whole numbers (i.e. 2px).

Many people like using percentages for font sizes because they give the user control of font sizes. The size is determined by their browser’s font size settings.

Kerning and leading can also be controlled with your CSS. Kerning is the space between characters and can be controlled with the letter-spacing property. Leading can be controlled using the CSS property, line-height. Both are great ways to control the look of your text.

Other possible and less popular units of measurements are:

  • points (pt)
  • pica (pc)
  • inches (in)
  • centimeters (cm)
  • millimeters (mm)
  • x space (ex)

Using pt is great for print stylesheets because they are a print unit of measurement. Points shouldn’t be used in your web pages because there are big differences between browsers when using points; Mac OS computers tend to show text 25% smaller than PC computers.

Web Safe Fonts

Web Safe Fonts

What is a web safe or web standard font? These fonts make up a group of a select few fonts that are available on most computers. This is what currently limits font choices on the web under CSS2 specifications.

Choosing from the web safe fonts available will ensure better control over what your text looks like on all browsers and operating systems. The consensus for the most popular fonts are:

Other popular fonts:

  • Impact
  • Lucida Console (Mac OS equivalent is Monaco)
  • Lucida Sans (Mac OS equivalent is Lucida Grande)
  • Palatino
  • Tahoma (Mac OS equivalent is Geneva)
  • Comic Sans
  • Trebuchet MS

When using any of these fonts—especially the ones from the second list—it’s a great idea to include a few options to fall back on in your CSS, as explained in the following section.

Setting Your Fonts

There are a few methods to choose from to display fonts on your websites. If you’re using a web safe font, you can declare it via CSS, such as in the following example:

font-family: Helvetica, Arial, sans-serif;

It’s important to include several fonts just in case someone doesn’t have your first option. This gives your user’s browser something to fall back on. This list of fonts is called a font stack.

Redefining “web safe fonts” with CSS3

Current CSS3 specs allow you to choose from any licensed OpenType or TrueType font at your disposal. You can do this by using @font-face, as shown in the following example:

@font-face {
  font-family: "Journal; src: url(journal.ttf) format("truetype");
}
h1 {
  font-family: "Journal", sans-serif;
}

Font replacement tools

There are several font replacement methods at your disposal if you are still unsure about using @font-face in your designs.

Cufon

Cufon is a favorite font replacement tool to use because it’s relatively painless to integrate into a website. Plenty of documentation is available on their website, as well as the text generator that spits out code you’ll need. Although it’s a good, solid solution, it’s not without it’s downsides—currently text rendered by Cufon is not selectable by users.

Cufon

sIFR

sIFR is a Flash-based text replacement method and is just as nice as Cufon. You’ll need Flash to create a font file for your site. It’s best used on headlines or very small blocks of text because the load time can drag on a bit if you use it extensively on a web page. The downside is that it doesn’t work without Flash enabled in your browser, but the upside of sIFR versus Cufon is that text is selectable.

sIFR

Web Typography Mistakes

Web Typography Mistakes

Lack of typography consistency is one the biggest mistakes new web designers make. Font properties are best controlled globally, and it’s good practice to set the font family, size, color, line height and weight for the body element of all your pages through CSS, such as in the following example:

body { font: 1em/1.3em Helvetica, Arial, sans-serif; color: #000; }

You should set heading styles globally as well for h1, h2, and h3. Link styles should also be set globally.

Choosing fonts that are too similar is not a good choice, and should be avoided by carefully looking at the style of fonts and the design of the site to choose something that is appropriate. Most serif headings pair well with sans serif fonts for body text. Pairing two sans serif fonts is a bit trickier but is certainly a viable option.

Some Examples of Great Typography in Websites

In this section, you’ll find an array of websites that display effective typography usage.

Analog

The typography choices made here match the theme of the site very well. Type plays a big role in the look of this site, using color, size, font, spacing, and layout to enhance the overall look of the page.

Analog

Blue Pixel

Blue Pixel uses Cufon to create bold headlines. The body font and the headline font are both san serif and go together well.

Blue Pixel

Festival Boreal

Cufon is also used here to add a unique look to the site through typography. Color, different sizes, and a fun asymmetrical layout create a great typographical design.

Festival Boreal

Go Media Inc

A mixture of a few different font themes creates a great web design here. The navigation is clean-cut with thin, uppercase type that is nicely paired with an italic serif font for taglines and headings on pages.

Go  Media Inc

Kari Jobe

Courier—a serif font—is paired with a few sans serif fonts in this design. The fonts work together with the design to create a look that brings together an old-world style with a new bright and modern feel.

Kari Jobe

SimpleBits

This site has lots of type and is organized well with set styles that create a user-friendly site. Bold uppercase type in the upper navigation work well with the sans serif body text and red serif headlines.

SimpleBits

We Are VI

This blog has several font styles at work and uses typography to their advantage by keeping the site organized and easy to navigate.

We  Are VI

Information Highwayman

Typography is used in the background as a design element, creating a great backdrop that doesn’t distract from the body text. The rest of the text complements the style, with good-sized easy to read body text using a serif font.

Information Highwayman

Check out this showcase of 20 websites with beautiful typography for more design inspiration and examples.

Additional Resources on Web Typography

I hope you enjoyed this look at typography in web design. Typography is a broad topic but an important concept to understand as a designer of any kind.

How heavily does typography play into the aesthetics of a web design? How much time should you spend on typography when designing a site?

Related Content

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/

Reblog this post [with Zemanta]