Layout
Learn how things like text size, text alignment, background design, and white space affect the presentation of your content.
Text size
Text size, or volume, communicates the role the text plays in the content. For instance, it’s common for headings to be larger or more bold than their body-copy counterparts.
Make sure that your headers stand out from your body copy, and that the body copy is big enough to read without straining your eyes.
Good example of text volume
Bad example of text volume
Text alignment
Text alignment, or justification, can effect how easy it is to read your content, and can lend visual consistency to your text. There are a few different ways to align your text and it’s important to know the differences.
Most readers are used to reading text from top to bottom, left to right. This is why almost all text is left-aligned; when you finish the text on the first line, it’s easy to find where the second line starts.
Center-aligned text is harder to read quickly. When we finish the first line of text, we have to hunt for the start of the second line as it isn’t right under where we started. Center-aligned text can be useful for captions under content.
Right-aligned text is usually used when your design centers around the right side of the page. This is rare and should be used only when necessary.
You may find it necessary to fully-justify your text, which means to align it to both the left and right sides of the paragraph block. This may look nice in some situations, but can cause unsightly spacing differences between words.
Choosing an appropriate background
Most backgrounds are either graphically created, such as a gradient or a solid color, or are photographs. They key to either is to use a clean and simple image that is not distracting.
Solid color backgrounds are usually best because they are least distracting. It’s also usually easier to read text off of a clean background than a photographic background.
Photo backgrounds tend to be busy and, as a result, distracting for the audience. However, photo backgrounds can be used very effectively to further communicate a topic, provided that any text is placed over negative space in the image.
Good example of a photo background
Good example of a graphic background
Bad example of a photo background
Bad example of a graphic background
Aligning graphic elements
Alignment refers to positioning your graphic and text elements relative to each other and to the design as a whole. The goal of the alignment process is to help create attractive, readable pages.
Most designs contain multiple graphic and text elements, and these should be aligned with one another. Otherwise, designs tend to look cluttered and unorganized.
White space
White space, or negative space, is any area of the design that does not contain text or graphic elements. This allows breathing room between the ideas presented in your design.
Too little white space will make a design feel cluttered and overwhelming, while too much can make it feel incomplete.
Good use of white space
Bad use of white space
Grid layouts
Advanced users sometimes develop grid layouts for their work. A grid defines an overall structure for the placement of content and includes areas designated as white space. Thinking With Type provides a detailed explanation of designing with grid layouts.
Layout utilizing a grid layout
Layout with grid on