The Anatomy of an Alphabet Letter

Small Things make Big Differences

Everyone likes thing that look beautiful and are generally pleasing to the eye. In web design (even if I do not like it), the priority is put on the aspect and not so much on the functionality or content. This is due to the infinite possibilities of WWW world where the user will tend to choose an interesting and remarkable design over a modest one but with great content.

Then a question arises, what are the elements that make the difference between a great design and a modest one? Only one entity has the answer, and that is God. As designers, we believe that we have some answers through analyses and comparisons, but no one can actually determine why a user prefer a website design over the others.

A good analysis starts with the atoms and molecules of a webpage. I consider them to be the letters or characters. By understanding the background about letters, it will help us get a bigger picture of webpage designs.

Letters – The Brick of Universe…The Universe of Web Design

I believe that design is a mean of communication where letters play a significant role. The way letters are arranged is important in building the message of a website. To understand the infinite Universe, scientists search for the composition of atoms and molecules. In web design, we shall apply the same process and divide a letter into small pieces.

Let us Discover the Core of a Letter!

Elements of a letter:

Baseline is the horizontal support on which the letters sit. It could be compared with the sea level (up means plus and down is minus).

Descender is the part of the “g”, ”j”, “p”, “q”, “y” letters that is situated bellow the baseline. You can imagine that that the lowest part of these letters being the Mariana Trench.

Ascender is the opposite of descender. It is determined by the top of “b”, “d”, “f”, “h”, “k”, “l”, “t” lowercase. It can be seen as the Mount Everest

Meanline is the horizontally line determined by the top extremities of the majority of lowercase letters as “a”,”c”, “e”, “x”.

Serif is one of the most important characteristic of a letter. It is an extra stroke at the end of one character. A font (to be easily understood, but not too technical) is a family of one kind of letters; the division of fonts in known worldwide: sans serif and serif.

Cap Height is the imaginary line that connects the top of all the capital letters. According to some specialists cap height is the distance between baseline and the top of the uppercase letters.

Title represents the dot above “i” and “j”.

The Leg refers to the lower or angled strokes of the letters “R”,”L”, “K”.

The Counter is the space within a letter. There are two possibilities: one when the space is totally closed as in “O”, “R”, “B” and the second one when it is not fully closed as in “C”, ”G”.

The Bowl is the term that names the curve that surrounds a counter.

The x-Height is …yes you guessed it; it’s the height of the lowercase “x”. It is the height of the body without ascenders and descenders. Because of that evenness, this characteristic is used as a relative unit of measurement in CSS.

A Stem is the main vertical/diagonal stroke(s) of a letter. It can be seen in “I” or “W”.

Shoulder is the curve at the beginnings of a leg of one letter.

Terminal is the end stroke of one letter (which is not a serif font).

Crossbar is the name given to the stroke that links two lines of one uppercase letter.

In the world of typography there are more than just 15 elements in a letter, but I believe that the above are considered as the most important. In terms of web design, this composition takes the shape of:

  • kerning and tracking
  • leading

Kerning refers to the process of horizontal space adjustment between individual letters. You will observe that the space between WY is wider than the space between “W” and “a” in “Washington”. These rules are in most cases resolved by the font itself (its creator will pay attention to these situations when designing the font).

Tracking is the amount of space between groups of letters in a block of text. It is like kerning but the difference consists in the fact that tracking deals with the space between letters as it affects the overall density of a word or a block of text.

Leading is the vertical space between lines of one text.

I hope you have enjoyed reading the article. Have a good weekend everyone.

Other Design Articles You May Find Interesting

7 Comments | Write a Comment

  1. Jason says:

    really cool posts, very easy to understand

  2. I didn’t know there were so many technical terms for font, I’m quite shocked, I know how to use font to it’s best efficeny that is I just didn’t realise there were such terms for the layout of it.

    Thanks for sharing, it was informative.

  3. Matt says:

    Really interesting stuff. Thanks for sharing, I will definietly try to use some of the tips provided!

  4. Great masterpiece tutorial,thanks for advance

  5. Very nice information. Thanks for compiling. Enjoyed it.

  6. Excellent post – informative, useful, and easy to read. Whilst there are many articles and pages with this information, this is one of the few which makes it insanely straightforward.

17-09-2014 | Comments Off on Top 50 sport wordPress themes
18-06-2013 | Comments Off on 20 sets of free grunge photoshop brushes
21-01-2013 | Comments Off on Free futuristic fonts from
06-01-2013 | (2) Comments
24-11-2012 | Comments Off on Make your own business card for free
08-02-2012 | (1) Comment
  • Free Brushes
  • FudgeGraphics
  • CrazyLeaf Design Blog
  • Fuel Your Creativity
  • Photoshop Tutorials and Design Resources
  • touch up photo retouching services
  • Small House Design
Follow My Twitter Subcribe Full RSS