The Elements of Web Design: Topography, Pattern and Movement

Page content


Typography involves selecting styles, layout, line spacing and arranging typefaces to solidify language. Typography has many facets and we shall consider a brief investigation on some common terms in use.

Baseline is the line where all letters lie while beardline is the limiting line that lowercase letters reach.

Bowl is the elliptical or rounded parts of a letterform and Cap Line is the limiting line that uppercase letters reach.

Counter is the white space that a letterform encloses, either partially or completely.

Extenders are parts of letters extending either above the midline for ascenders or below the baseline for descenders while Midline is the top part of the lowercase letters like ‘a’ and ‘c’ and the top chest of lowercase letters like ‘b’ and ‘d’.

Serif is a stroke added to the end or the beginning of the main strokes of a letter while Stem is the main letter stroke not part of the bowl and generally straight.

Topline is the line ascenders of lowercase letters reach and X-height is the distance of an alphabet between the midline and the baseline. It is the height of the lowercase letters when not extended.


Pattern is the repetition of form or shape. It can also be used as the underlying reflection of the structure of a design within a composition that has its objects ad surfaces under organization. There are different kinds of patterns:

• Flowing: This pattern reflects a natural winding exhibited in a composition and based on a repetitive rising and falling line.

• Branching: This pattern is a repetitive forking line or deviating patterns. These patterns are evident in plants and in the different facets of the natural world.

• Spiraling: a circulating pattern that goes round itself, in and out


Movement is explained as motion of objects through an expanse over a set time period. Often the following two ways describe movement:

• Literal: Physical movement is literal movement. Some examples of this form of motion are automobile, dance and motion pictures.

• Compositional: This form of movement is the viewer’s eyes movement in a given composition. It can be either dynamic or static. In static movement, there is jumping in composition parts of isolated parts. Dynamic movement is smooth and it exhibits a smooth flow from one part to another.


We have explored the field of design by considering the fundamental concepts in deep detail. These design principles help us to have a wider and broader look at the world. The design profession is universally affected by the adages of design work that provide the guidance to a composition. These design elements look at the components making up the composition and offer a designer the groundwork from where he can begin working.

To explore the design fundamentals with an open mind, it is necessary to step back from any medium.

This post is part of the series: The Elements of Web Design

Web design is about more than the world wide web. The web development of a page or site requires knowledge of basic art, functionality and flow.

  1. The Elements of Design in Web Development: Intro, Line and Point
  2. The Elements of Web Design: Shape, Texture and Color
  3. The Elements of Web Design: Color
  4. The Elements of Web Design: Topography, Pattern and Movement