Types of Alignment

There are two types of alignment which then are divided into more subgroups, types of alignment are as mentioned below:

1. Horizontal alignment

Horizontal alignment is the type of alignment that is set on the horizontal X axis going from left to right. It can be further divided into three sub types:

• Left Alignment: Left alignments are the most commonly used horizontal alignment. For the human brain especially for text, knowing the exact starting point for each row of text makes it easier to read or scan text faster. This type of alignment is also a common starting point for alignment of other elements on a page or a screen. This is since we usually scan pages of content in a Z-like pattern that starts from the top left corner and ends in the bottom right corner.
• Right alignment: Right alignment is not as common as left however this is still often used in a lot of context like when you group data or actions inside of a component, on a social media post component. For example on Twitter, the ellipsis icon is right aligned, another example could be the floating action button in the bottom right corner.
• Center alignment: Center alignment in the horizontal axis is commonly used in components that contain an icon or a button but when it comes to text it is ideal to not Center align the text block if it exceeds three rows of text, this is due to poor legibility that it creates in large chunks of textual content.

2. Vertical alignment

A Vertical alignment is set on the vertical axis going from bottom to the top. It can be further divided into three sub types:

• Top alignment: Top alignment is very commonly used in designs and and texts and also is the default settings in most tools like Figma, whenever you create a new text layer you will see that Figma and most other tools automatically sets the vertical alignment of the text layer to top alignment. This is most intuitive to users because of the increase in findability since users commonly start at the top left corner and end at the bottom.
• Bottom Alignment: In Bottom Alignment, the elements stick to the bottom, this useful for instance if you have an image thumbnail element with a title placed on top of the image you may want to align the text element to the bottom, if you exceed one row of text the next row will fall all the way to the bottom making sure your text layer always aligns with the bottom edge of the thumbnail container.
• Center alignment: In this type of Vertical Alignment we have in both the horizontal and the vertical axis, so similar to the last example we center align vertically the content inside buttons and icons but this is also helpful in header elements as well in combination with a horizontal left alignment for instance.

Alignment is crucial, so crucial that now it is no longer considered a best practice rather it has become the de facto for most of the website. You will hardly find any website or application these days that does not follow alignment. Most people recognize Alignment as icons present in most of the word processing tools like Google Docs or Microsoft Word, the same icons are found in all design tools like Figma, Sketch, and Adobe. In this article, we will discuss about one of the most important things in layout design, alignment. We will discuss what Alignment actually is and what is the importance of alignment.