Vertical Space – Getting it Just Right

Of equal importance to typography as font selection, is vertical space. Page content must be easy to read and flow from topic to topic. Xidipity is meticulously designed to support vertical rhythm so the end result is pleasing to the eye and professional in its form.

Of equal importance to typography as font selection, is vertical space. Sometimes this is referred to as Vertical Rhythm.

 

Rhythm is defined as a strong, regular, repeated pattern of movement or sound and the more consistent and familiar a rhythm is, the better and stronger it becomes. Content with vertical rhythm is visually more-relaxing, evokes feelings of familiarity, removes visual barriers and makes content more readable. Xidipity leverages “rem & em” units to scale fonts which goes a long way to creating a Vertical Rhythm.

 

Another force at play with good typography design is proximity. The principle of proximity is simple: we read things near each other as belonging together. For example, in a crowded room, if you see two or three people standing near each other, you might assume they are together, even if they are not engaged in conversation.

 

Typographically speaking, proximity works the same way. Words are strung together to form a sentence. Lines of text which are close together form a paragraph. Lists of items form a visual “cue”. Readers who are scanning with a purpose don’t just scan down the text. They jump from section to section, looking for a specific piece of information (for example, from job to job in a resume).

 

Vertical Spacers

How do vertical spacers fit in? There will be times when the pieces and parts of your content do align as desired and the layout becomes visually unappealing. The solution becomes either making adjustments to the underlying CSS by adding a “style” element, add a Tailwind element to a “class” selector, or insert a vertical spacer. In most cases inserting a vertical spacers is the easiest choice and provides consistency. In the following examples, the vertical space is added after the first line and before the second line.

 

Use Case

1/2 Height Space Added

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

½×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

3/4 Space Added

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

¾×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Single Space Added

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Double Sized Space Added

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Triple Sized Space Added

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

 Installation

  1. Place cursor at the beginning of the line where the space is needed
  2. Select the ( horizontal_split ) Vertical Spacers dropdown from toolbar
  3. Select the space required
    • · ½ Height
    • · ¾ Height
    • · Single Height
    • · Double Height
    • · Triple Height

 

In the TinyMCE editor vertical space add by this tool is tinted to provide a visual cue. 

 

bookmark_border Attribution: Typographic Web Design

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *