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.

Xidipity post/page titled "Vertical Space – Getting it Just Right" header image

½×

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 Classic editor vertical space added by this tool is tinted to provide a visual cue.

 

 

 

 

avatar
About: Admin

My name is John Baer and I am the author of the Xidipity theme. My goal with Xidipity is to create a theme which is flexible and easy to use. This is accomplished by the application of templates and enhancing the classic editor. Xidipity leverages the latest web technologies to remain snappy.

 

 

Got Something To Say?

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