Grid (graphic design)

Last updated
A page layout grid (shown in white lines) composed of a series of intersecting vertical and horizontal grid lines. The text (content) is not part of the grid. The text content is applied to a particular page using the grid "flush left" along the bottom sides and right-hand sides of grid lines. The same grid may be applied to multiple pages using different types of content or different styles of the same content type. Grid2aib.svg
A page layout grid (shown in white lines) composed of a series of intersecting vertical and horizontal grid lines. The text (content) is not part of the grid. The text content is applied to a particular page using the grid "flush left" along the bottom sides and right-hand sides of grid lines. The same grid may be applied to multiple pages using different types of content or different styles of the same content type.
A grid applied within an image (instead of a page) using additional angular lines to guide proportions. Divina proportione.png
A grid applied within an image (instead of a page) using additional angular lines to guide proportions.

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved lines (grid lines) used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner. A grid can be used to organize graphic elements in relation to a page, in relation to other graphic elements on the page, or relation to other parts of the same graphic element or shape.

Contents

The less-common printing term "reference grid," is an unrelated system with roots in the early days of printing.

History

Antecedents

Before the invention of movable type a system based on optimal proportions had been used to arrange handwritten text on pages. One such system, known as the Villard Diagram, was in use at least since medieval times. [1]

Evolution of the modern grid

After World War II, a number of graphic designers, including Max Bill, Emil Ruder, and Josef Müller-Brockmann, influenced by the modernist ideas of Jan Tschichold's Die neue Typographie (The New Typography), began to question the relevance of the conventional page layout of the time. They began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was the modern typographic grid that became associated with the International Typographic Style. The seminal work on the subject, Grid systems in graphic design by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.

Reaction and reassessment

By the mid-1970s instruction of the typographic grid as a part of graphic design curricula had become standard in Europe, North America and much of Latin America. The graphic style of the grid was adopted as a look for corporate communication. In the early 1980s, a reaction against the entrenchment of the grid, particularly its dogmatic use, and association with corporate culture, resulted in some designers rejecting its use in favor of more organic structure. The appearance of the Apple Macintosh computer, and the resulting transition away from type being set by typographers to designers setting type themselves resulted in a wave of experimentation, much of it contrary to the precepts of Tschichold and Müller-Brockmann. The typographic grid continues to be taught today, but more as a useful tool for some projects, not as a requirement or starting point for all page design.

Grid use in web design

While grid systems have seen significant use in print media, interest from web developers has only recently seen a resurgence. Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts. Some grid systems specify fixed-width elements with pixels, and some are 'fluid', meaning that they call for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points. [2]

The W3C published the CSS Grid Layout Module Level 1 to define a two-dimensional grid-based layout system. [3]

There are also CSS frameworks that include their own grid system:

Grid use in print design

Print design has always used grid systems to organize and structure content. Grid systems started as helper lines for written books. Artists used grid systems to layout the content – text and images – in a manner that makes reading and absorption easier. Newspapers, books, magazines, and classifieds, etc., all use different grid systems that make the optimum use of space for better reading and presentation. [4]

Software

Most desktop publishing software and professional publishing software and other office software including word processors displays grid layout as an option.

See also

Related Research Articles

<span class="mw-page-title-main">Graphic design</span> Interdisciplinary branch of design and of the fine arts

Graphic design is a profession, academic discipline and applied art whose activity consists in projecting visual communications intended to transmit specific messages to social groups, with specific objectives. Graphic design is an interdisciplinary branch of design and of the fine arts. Its practice involves creativity, innovation and lateral thinking using manual or digital tools, where it is usual to use text and graphics to communicate visually.

<span class="mw-page-title-main">Typography</span> Art of arranging type

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), as well as adjusting the space between pairs of letters (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process. Type design is a closely related craft, sometimes considered part of typography; most typographers do not design typefaces, and some type designers do not consider themselves typographers. Typography also may be used as an ornamental and decorative device, unrelated to the communication of information.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

Desktop publishing (DTP) is the creation of documents using page layout software on a personal ("desktop") computer. It was first used almost exclusively for print publications, but now it also assists in the creation of various forms of online content. Desktop publishing software can generate layouts and produce typographic-quality text and images comparable to traditional typography and printing. Desktop publishing is also the main reference for digital typography. This technology allows individuals, businesses, and other organizations to self-publish a wide variety of content, from menus to magazines to books, without the expense of commercial printing.

<span class="mw-page-title-main">Jan Tschichold</span> German graphic designer (1902–1974)

Jan Tschichold was a German calligrapher, typographer and book designer. He played a significant role in the development of graphic design in the 20th century – first, by developing and promoting principles of typographic modernism, and subsequently idealizing conservative typographic structures. His direction of the visual identity of Penguin Books in the decade following World War II served as a model for the burgeoning design practice of planning corporate identity programs. He also designed the typeface Sabon.

<span class="mw-page-title-main">Kinetic typography</span> Style of animation mixing text and motion

Kinetic typography—the technical name for "moving text"—is an animation technique mixing motion and text to express ideas using video animation. This text is presented over time in a manner intended to convey or evoke a particular idea or emotion.

<span class="mw-page-title-main">Josef Müller-Brockmann</span> Graphic designer

Josef Müller-Brockmann was a Swiss graphic designer, author, and educator, he was a Principal at Muller-Brockmann & Co. design firm. He was a pioneer of the International Typographic Style. One of the main masters of Swiss design. Müller-Brockmann is recognized for his simple designs and his clean use of typography, shapes and colors which inspire many graphic designers in the 21st century.

<span class="mw-page-title-main">Ladislav Sutnar</span> Czech graphic designer (1897–1976)

Ladislav Sutnar was a Czech graphic designer. He was a pioneer of information design and information architecture. Although he is uncredited, his contributions to business organization benefited society, which included creating a user-friendly telephone directory by implementing parenthetical area codes. He received design commissions from a variety of employers, including McGraw-Hill, IBM, and the United Nations. He also worked as art director for Sweet's Catalog Service for almost twenty years. Sutnar held many one-man exhibitions, and his work is on permanent display in MoMA. He is best known for his books, including Controlled Visual Flow: Shape, Line and Color, Package Design: The Force of Visual Selling, and Visual Design in Action: Principles, Purposes. Sutnar was a master of exhibition design, typography, advertising, posters, magazine and book design.

<span class="mw-page-title-main">Page layout</span> Part of graphic design that deals in the arrangement of visual elements on a page

In graphic design, page layout is the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives.

<span class="mw-page-title-main">International Typographic Style</span> 20th century European graphic design style

The International Typographic Style is a systemic approach to graphic design that emerged during the 1930s - 1950s but continued to develop internationally. It is considered the basis of the Swiss style. It expanded on and formalized the modernist typographic innovations of the 1920s that emerged in part out of art movements such as Constructivism (Russia), De Stijl and at the Bauhaus (Germany). The International Typographic Style has had profound influence on graphic design as a part of the modernist movement, impacting many design-related fields including architecture and art. It emphasizes simplicity, clarity, readability, and objectivity. Hallmarks of the style are asymmetric layouts, use of a grid, sans-serif typefaces like Akzidenz Grotesk and Helvetica, and flush left, ragged right text. The style is also associated with a preference for photography in place of illustrations or drawings. Many of the early International Typographic Style works featured typography as a primary design element in addition to its use in text, and it is for this that the style is named. The influences of this graphic movement can still be seen in design strategy and theory to this day.

<span class="mw-page-title-main">Canons of page construction</span> Principles of page layout

The canons of page construction are historical reconstructions, based on careful measurement of extant books and what is known of the mathematics and engineering methods of the time, of manuscript-framework methods that may have been used in Medieval- or Renaissance-era book design to divide a page into pleasing proportions. Since their popularization in the 20th century, these canons have influenced modern-day book design in the ways that page proportions, margins and type areas of books are constructed.

Emil Ruder was a Swiss typographer and graphic designer, who with Armin Hofmann joined the faculty of the Schule für Gestaltung Basel. One of the main masters of Swiss design.

<span class="mw-page-title-main">Column (typography)</span>

In typography, a column is one or more vertical blocks of content positioned on a page, separated by gutters or rules. Columns are most commonly used to break up large bodies of text that cannot fit in a single block of text on a page. Additionally, columns are used to improve page composition and readability. Newspapers very frequently use complex multi-column layouts to break up different stories and longer bodies of texts within a story. Column can also more generally refer to the vertical delineations created by a typographic grid system which type and image may be positioned. In page layout, the whitespace on the outside of the page are known as margins; the gap between two facing pages is also considered a gutter, since there are columns on both sides.

Reginald Clifton Firth was a New Zealand graphic designer and photographer. Influenced by writings of the Bauhaus and contemporaries, especially the Swiss typographer Jan Tschichold, Firth's design work of the late 1920s and early 30s was some of the earliest modernist graphic design in New Zealand. Firth later went on to be a successful portrait photographer in Auckland during and after the Second World War.

<span class="mw-page-title-main">Modern typography</span> Late 19th century unornamented style

Modern typography was a reaction against the perceived decadence of typography and design of the late 19th century. It is mostly associated with the works of Jan Tschichold and Bauhaus typographers Herbert Bayer, László Moholy-Nagy, El Lissitzky and others.

<span class="mw-page-title-main">Responsive web design</span> Approach to web design for making web pages render well on a variety of devices

Responsive web design (RWD) or responsive design is an approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction.

Foundation is a free responsive front-end framework, providing a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is an open source project, and was formerly maintained by ZURB. Since 2019, Foundation has been maintained by volunteers.

<span class="mw-page-title-main">Karl Gerstner</span> Swiss designer, typographer, author and artist

Karl Gerstner was a Swiss designer, typographer, author, and artist.

<span class="mw-page-title-main">CSS grid layout</span>

In Cascading Style Sheets, CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers. Historically, there have been other methods for controlling web page layout methods, such as tables, floats, and more recently, CSS Flexible Box Layout (flexbox). CSS grid is currently not an official standard although it has been adopted by the recent versions of all current major browsers.

<span class="mw-page-title-main">Swiss Style (design)</span>

Swiss style is a trend in graphic design, formed in the 1950s - 1960s under the influence of such phenomena as the International Typographic Style, Russian Constructivism, the tradition of the Bauhaus school, the International Style and classical modernism. The Swiss style is associated with the activities of Swiss graphic artists. However, the principles of the Swiss style have spread in different countries, so the “Swiss style” uses wide international program.

References

  1. "Archived copy". Archived from the original on 2013-05-30. Retrieved 2013-06-17.{{cite web}}: CS1 maint: archived copy as title (link)
  2. Marcotte, Ethan (March 3, 2009). "Fluid Grids". A List Apart.
  3. Tab Atkins Jr.; Elika J. Etemad; Rossen Atanassov (14 December 2017). "CSS Grid Layout Module Level 1". World Wide Web Consortium . Retrieved 10 July 2019.
  4. "What is a grid system?".

Further reading