Jason Bao's Bookmarks tagged font →  View Popular

The "a" in Helvetica has a tail; Arial does not. Also, the bowl of the "a" flows into the stem like a backwards "s"; the bowl of Arial's "a" simply intersects the stem with a slight curve. (Interestingly, the Grotesque "a" has a tail, just like Helvetica. The bolder weights of Helvetica have no tails, an inconsistency that bothers some people. Maybe it bothered Monotype, too.) Arial's "a" has always seemed a little badly drawn to me, but maybe it's just me.

The top of the Arial "t" is cut off at an angle; the Helvetica "t" is cut off straight. You can see clearly here how the x-height of Arial matches Helvetica's. This is one of the main things that makes Arial look like Helvetica at first glance, even though the details are different.

The ends of the strokes of letters like "S" and "C" are perfectly horizontal in Helvetica; in Arial and Grotesque they are cut off at a slight angle.

The "G" in Helvetica has a spur at the bottom of the stem on the right side and the curve at the bottom of the "G" flows into the stem; in Arial and Grotesque the "G" has no spur and the curve at the bottom meets the stem at an angle.

The tail of the "R" in Helvetica flows out from the bowl and curves straight down, ending in a slight curve to the right. In Arial, the tail flows down and to the right from near the center of the horizontal bar and straightens out at an angle to the end. It appears to be a compromise between the Helvetica "R" and the Grotesque "R." This feature is very unusual for a "grotesque" design, and is more typical of "humanist" sans serifs. It feels out of place here and is one of the more awkward design features of Arial.

Here is the same word set in all three typefaces:

In both fonts, the characteristics described here apply to all weights (except, of course, the tail on the Helvetica "a," which is dropped on the bolder weights).

CSS:






1. a:link:after,


2. a:visited:after,


3. a:hover:after,


4. a:active:after {


5. content: " <" attr(href) "> ";


6. color: grey;


7. font-style: italic;


8. font-weight: normal;


9. }


10. a[href^="/"]:after {


11. content: " <http://www.example.com"attr(href)"> ";


12. }

认知心理学家Donald A. Norman将人类的行动分解成七个阶段：

1. 确定目标

2. 确定意图

3. 明确行动内容

4. 执行

5. 感知外部状况

6. 解释外部状况

7. 评估行动结果

• One point = 1/72 of an inch


• One pica = 12 points


• One em = The distance horizontally equal to the type size, in points, you are using. Eg. 1em of 12pt type is 12pt. (Thanks to Joe for correcting me on this.)