85: Impact websafe font.

h1{color: #333333; font-size:280%; line-height:100%;font-family:Impact,
Haettenscheweller, “Arial Narrow Bold”, Charcoal,
sans-serif;font-weight:normal;font-style:normal;letter-spacing:-1px;}

I suppose the spacing would be better specified as an “em” space instead of pixels –per responsive design specs for mobile. And, of course, the size needs to be adjusted to the whitespace. If the line height is NOT specified the fat words wrap on top of each other (fluid) –brokenness (when and if there are more words).

“Haettenscheweller” is a freeware font lookalike to Impact (a Microsoft Office bundled font). Apparently, it’s popular enough to include –but don’t ask me to ever spell it! Copy and paste only.

Impact is available on 99% of IE, 92% Mac, and 64% Linux operating systems –but not on iOS. You might test and see what happens there. I noticed it rendered fine on your tablet.

Impact should never be bolded or italicized. It makes it unreadable and is only useful as a “naked” headline font –never body text. Kerning (letter-spacing) must almost always be tweaked either tighter or wider.

Because Impact is an underutilized “websafe” display font, I use it in branding for print and web. I consider it a “core” design font for fast sites. Impact is a bold (strong), grotesque-style, condensed font created for metal plate in 1965. It has upper and lowercase characters.

As you can see, I’m a typography freak, too. :)

84: Balanced asymetry for mobile devices.

Is it possible to do nonlinear gradients in CSS? For example, say I’d like more black at the top in a gradated banner. Can I define a starting point for the gradient to begin? What I’ve seen so far has a start and finish point at the edges of the div. Can one tweak this behind floating text? A 50% “break” in the middle isn’t aesthetic always.

This control would make a difference in perception. Human don’t see things linearly. It’s more appealing to have “balanced asymmetry” sometimes. This is golden ratio and optical stuff. I’ll explain more how this affects the UI you are working on in a bit. I seem to be wandering in my head today on various topics. This is NOT unusual. :)

http://www.1stwebdesigner.com/design/symmetrical-asymmetrical-web-design/

http://en.wikipedia.org/wiki/Symmetry#Symmetry_in_aesthetics

http://desktoppub.about.com/od/designprinciples/g/asymmetrical.htm

http://desktoppub.about.com/od/designprinciples/l/aa_balance2.htm

Asymmetry –and balanced asymmetry– can create a more dramatic design. Yet it is so subtle, viewers are usually unaware of the manipulation (subconscious).

The use of asymmetrical balance is especially useful for mobile websites. First, it is weightless (doesn’t hog bandwidth). Second, most mobile screens are centered and boring. Third, it can be done with simple CSS and HTML elements. No graphics files are necessarily needed.

83: Site Comfort is UX

“Web credibility is based directly on the overall visual design of a site, specifically noting layout, typography, font size, and color schemes.”

–Stanford University Persuasive Technology Lab

Think of a web page as a person.
If a person is not congruent, contradicts himself, and does not seem to be consistent, that person is typically not someone who earns your trust. Every webpage element, the headline, text, image, and the testimonial, must be congruent. The highest performing landing page matches exactly what motivated a customer to come to you in the first place. Congruence includes design, copy, images, colors, logo, and price.

A sense of belonging and being understood is a powerful motivator for people.
After we get past our anxiety and confusion and find the information we need, we still have to deal with affinity or alienation by the website. We want to be recognized for who we are, understood, and valued. These are subtle issues of identity, tribalism, self-esteem, and belonging.

In those first few impressionable secondswhen your guest “steps” into your site—your reputation and identity are evaluated for credibility. Credibility has three components: trustworthiness, expertise, and leadership. You use a soothing voice, tone, and body language to calm a visitor. This comfort level is achieved with graphic design.


As markets become more competitive, design is more of a distinction. People are overwhelmed by unwanted information. Focus your message so it gets through your potential customer’s filter.

There is no such thing as a business being exactly the same as its competitor—you are one-of-a-kind.