From our sponsor: Get personalized content recommendations to make your emails more engaging. Sign up for Mailchimp today.
Proper alignment of elements and text on your website greatly impact the overall design.
Meticulous alignment of elements, such as images and text blocks, adds an extra level of professionalism to your site and is visually appealing and calming. Choosing the proper alignment for text within each block can also add a sense of order and contributes to readability and overall design.
But it can sometimes be hard to choose how to align items. Think about your audience as you select how to align elements, especially type, and keep readability in mind as a key concern. When working with other elements consider how they will be used as you develop an outline for your site.
There are several places alignment comes into play with text – for your banner, navigational tools, sidebars and main body text. Each of these elements could include text that is aligned in different ways, but you likely want to develop a consistent style within each text element type.
Text can be aligned in four distinct ways – left, right, center and justified. When selecting a default alignment for body type on your site, first think of the language type will be displayed in. Does it read from left to right, or right to left?
Left aligned text is the default setting in most computer software and for building websites when no other text direction is set. Each line of text aligns with the left margin and is ragged along the right margin. Left justified text is the standard for main body text on most websites because it is easy to navigate, design and read. In web design, word spacing is most consistent with left alignment.
Right aligned text is the default setting for languages that read from right to left. Text aligns with the right margin and is jagged along the left side. Right justification appears most frequently in navigational elements or break out text blocks that are used more like art elements, such as big quotes.
Centered text is centered within the box it resides. Lines of type are typically jagged on both the right and left sides. Centering is most commonly used for text blocks containing few words.
Justified text stretches the entire width of a frame. While justified text is commonly used in print materials, it is uncommon in web design. The look of justified text can be somewhat hard to predict in different browser sizes. Further, because of the lack of defined hyphenation, text can squeeze and stretch somewhat more unpredictably, making readability an issue online.
How you align images is relative to the size of each image and its relation to other elements on your site. Images can be aligned to the left or right margins or centered.
Commonly, display images are centered for maximum impact and to avoid having an abundance of dead space on one side or the other, in the way images are used on this website. The same is often true of images that are used as backgrounds. Display images are sometimes aligned to the left as well depending on how they pair with text or other elements; right-alignment for display images works in some instances but is not a commonly-used tool.
Smaller images offer much more flexibility in terms of alignment. Images that are inset in text blocks can be aligned to either the left or right. Aligning to the left margin creates simple clean lines with no jagged edges around images when paired with left-aligned text. Aligning to the right margin is a common alternative, with left-aligned text creating an uneven edge around the image. The one technique you will want to avoid is centering a small image inside a text block; this can make text very had to read. Do you read across or around the image?
Groups of Elements
By aligning elements in groups, even items that are different such as text and images, you add an extra level of organization and even professionalism to the look of your site. Note how the “The Kitchen” text block sits in alignment with the “What’s happening” block below it in the image above.
Keep in mind that all alignment is not in perfect squares. Items of different shapes and sizes can be aligned to a single plane for emphasis, making interesting shapes and groupings. As you can see in the image above, the effect you get when grouping the same elements with no common alignment is quite different.
You don’t have to pick one type of alignment and stick to it for every part of your site design.
For text, you may choose to center navigation tools while using justified text for the main body copy. This can be a very effective use of alignment tools. The key is aligning common elements in the same way. Outline a plan for how text will be aligned for different parts of your site framework and stick to it.
For images, you may want to alter alignments. Maybe small photos could alternate between left- and right- justified positions for variety. This is a common and very effective practice. Make sure though, that all of your left- or right-aligned items fall along the same gridline. You can add even more emphasis in this configuration by sizing photos at the same widths to create a defined alignment scheme.
Good article. Thank you!
Thanks for raising awareness on these points. Nice read.
basic things that we sometimes seem to forget or ignore……. thanks for the reminder. i always enjoys these sorts of articles
This is a brilliant writeup and you cover so many important aspects of web design. It’s not just about the aesthetics, but interface elements also play a huge role in the success of any layout design.
Really interesting article. I enjoyed reading this post.Proper alignment is the most important part of any website,and a site is virtually meaningless without it. Thank you so much for this fine piece of quality content. Keep sharing.
Great write up.
You didn’t cover baseline grids and vertical rhythm though, which I think also falls under the scope
of this piece. Or maybe not… Maybe you’re already working on it 🙂
I am absolutely obsessed with minimal designs with lots of whitespace that use “strong” alignment
to create perceived boundaries (as opposed to say shading a sidebar to show that it’s well a sidebar).
I’ve found the headsup grid the best thing since sliced bread for aligning elements
as well as making sure the copy adheres to a baseline grid.
Look it up, actually it’s at (http://bohemianalps.com/tools/grid/). If you haven’t come across this nifty
little development/design tool, you won’t be disappointed. It’s pretty self explanatory. I only wish I
had discovered this years ago and saved myself countless hours fudge guessing pixel values adding
one more pixel then hitting refresh… SMH.
Keep up the good work. I love Codrops!
Awesome tips on how to get the foundation of your website right! It makes all the difference!
Nice article. Good fundamentals.
thanks for this nice article
awesome article… thanks Carrie
A very important aspect of design, often overlooked by many professionals. Glad to see it get the attention it deserves, helpful blog post! 🙂
Good One. Thanks for sharing.
This website is so clean. Keep up the good work!