What do math teachers and city planners have in common aside from indispensable yet low-compensating jobs? A love for grids, of course! This is one of those special topics that seems really important because it is really important but still doesn’t get enough attention. It’s on par with balancing a checkbook and learning to properly mimic funny accents.
Thankfully grids can be useful to many career paths outside of mathematics and architecture. I want to focus on the benefits of grid structure when it comes to designing web typography. A typical layout often uses many small blocks of text which are crucial to a good user experience. This post should offer some introductory ideas for designers who want to create better websites focusing on organized typography.
Sizes and Positioning
On the Internet font sizes are generally relative. This would be in contrast to print designers who have free reign over their typography. When something is designed for print the letters may be rescaled to larger or smaller dimensions – but the final product is set in stone. Web browsers don’t work the same as magazines because that would imply shape-shifting magazines. Or that browsers should all use the same scale for sizing fonts… but let’s not get carried away.
Since different monitors run at different resolutions, web browsers have become more adaptive. Font sizes are relative to each display so the size and alignment of paragraph text on the page is prone to shift around.
Line height is a magical property which can be adjusted using CSS. Each line of text is fitted using a certain adjusted line height to create a bit of padding above and below the line. Otherwise text would be scrunched up real tight and look horribly disfigured.
Fancy-shmancy designer terminology calls this effect leading. The distance between lines of text will be the difference between readability and inability(to read). This rule is also applied to headings which need an appropriate distance from smaller text. Distinguishing between different sizes can be easier when using different font styles and font faces.
Baseline Design
Grids result in a fine line between rigid structural guidelines and obsequious attention to detail. Find your structure but be willing to deviate if a better opportunity presents itself. Patterns are important but they don’t need to repeat throughout all areas of your design.
A website header may use different typographic grid styles compared to the body, sidebar, and footer section. Typefaces may be similar but patterns which demarcate individual page sections will be more recognizable. Enter the concept of baseline grid design which expands on the use of whitespace within grids.
Creating a baseline grid is as simple as recognizing the vertical flow of content. There are many great articles which cover this process in detail for CSS and Photoshop designers. It all boils down to vertical spacing between lines of text and individual blocks of text. The baseline consists of different numbers for font sizes and line height values. An orderly page is a readable page because the space between content is predictable even from a distance.
Finding your Rhythm
No this doesn’t mean that learning to swing dance would help with web design(although it does come in handy). Rhythm in the context of design is all about balancing a composition. It’s been discussed many times before that vertical rhythm is the key to great typography. The size of letters along with the space between letters will define how text appears in a layout.
Specifically the most important concept is distance. It’s really about the notes you’re not playing. Or in this case it’s about the space you’re not using. Vertical rhythm can be accomplished with consistent spacing between elements like headers and paragraphs. There should be plenty of extra space between paragraphs so that readers naturally associate the gap as a break.
Most content is often structured into paragraphs to split up different ideas. Headings are used to differentiate between many separate ideas with encapsulating paragraphs. Similar content may include blockquotes, lists, images, or other media.
By following one structured rhythm for margins & line-height you create a repeated design for every block of content. Readers absorb your design like evasive subtext on a first date, and they eventually begin to recognize a pattern. Order and predictability is what makes good page rhythm. And good page rhythm should make you excited enough to dance the night away.
Grid Design in Photoshop
Usually it’s better to start designing something in a graphics editor before jumping right into code. Photoshop is the most common program which offers guides and rulers as tools for building grids. When designing a mockup try creating guides to align content naturally with your layout.
Alternatively you might try automating the grid process with a plugin like GuideGuide. This is free to download and works with Photoshop CS5-CC. The plugin creates a new panel where you enter specific pixel values for columns and margins. This will add pixel-perfect guides without the need to drag out individual guides from rulers.
Since content often changes from a mockup to the real website it’s not worth over-planning the entire design. Setup rulers for important sections of vertical rhythm like content sliders and primary page headers. Leave the rest to your eyeball and see how it translates into code.
With a bit of practice you’ll learn the best positioning for rulers in mockup design. Each layout will be different than the last but content structure is generally uniform. Don’t try to make every line of text pixel-perfect in Photoshop because you might change plans when coding for the browser. Have a general idea of the design and keep your focus on the big picture.
Final Thoughts
This article may be over but the learning is far from done. I hope these ideas can help web enthusiasts break into the topic of general grid-based design. Reading is always useful but it’s important to move these ideas from your squishy brain matter into real design work. Photoshop can be quite forgiving if you have patience and tenacity for failure. The best part is once you can see how text forms into grids you’ll never want to go back to the dark ages building off chaotic design intuition.
Source: http://ift.tt/1AvBjv5
No comments:
Post a Comment