Vertical Spacer

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 CSS “rem” units to scale fonts which goes a long way to create 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 making adjustments to the underlying CSS by adding a “style” element, or 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 in the left hand column so that a comparison can be made to the standard text in the right.

 

Use Case

1/2 Height

½×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

½×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Snippet

 

<p class=”spacer-1/2″>½×</p>

 

3/4 Height

½×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

¾×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Snippet

 

<p class=”spacer-3/4″>¾×</p>

 

Single Height

½×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Snippet

 

<p class=”spacer-single”>×</p>

 

Double Sized Height

½×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Snippet

 

<p class=”spacer-double”>2×</p>

 

Triple Sized Height

½×

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

 

Snippet

 

<p class=”spacer-triple”>3×</p>

 

Vertical Spacer

Installation

  1. Highlight the desired snippet code
  2. Copy to clipboard
  3. Place cursor at the beginning of the line where space is needed
  4. Click the editor “Insert ” menu dropdown
  5. Select “ Media”
  6. Select the “Embed” tab
  7. Paste clipboard content into the text box
  8. Click the “OK” button

 

In the TinyMCE editor (see screenshot), vertical spacers are tinted to provide a visual cue. 

 

 

Leave a Reply

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