Páginas do livro “Grid System in Graphic Design” (J. MULLER-BROCKMANN). Imagem de Oliver Tomas.

Grades ou Grid’s

Os grid’s ou grades servem para auxiliar a manter a consistência visual do projeto durante o processo de diagramação. Ele não deve visto como uma estrutura rígida e inflexível, mas um guia, uma recomendação de projeto.


O Grid é uma estrutura geométrica constituída por eixos (comumente horizontais e verticais) desenvolvida para auxiliar o alinhamento de elementos textuais e imagéticos numa composição visual.

Geralmente os grid’s são divididos em quatro categorias: retangular, de colunas, modular e hierárquico.

Grid Retangular

É mais usado no projeto de romances e outras produções literárias onde predomina o texto escrito. Ele basicamente delimita as margens da mancha gráfica e por meio disso determina o peso visual do projeto.

Exemplo de grid retangular par ao projeto de livros. Imagem: Joel Friedlander

O grid retangular também é mais recomendado para formatos pequenos, como A5 ou carta por exemplo, em formatos maiores a coluna pode se tornar muito larga e assim dificultar a leitura.

Grid de colunas

Grid de colunas no projeto de revistas.

É um grid que além das margens identifica colunas de informação. Ele é geralmente utilizado em projetos onde é necessário diagramar grandes volumes de informação de categorias diferentes, como imagens, textos, boxes, entre outros. Por isso o grid de colunas é mais utilizado no projeto de revistas.

Grid modular

Exemplo de grid modular proposto por Wim Crouwel.

É um grid que organiza as informações por meio de linhas e colunas, criando um conjunto de módulos. Ele geralmente é utilizado quando é necessário organizar um volume muito grande de informações que não necessariamente se relacionam, por isso ele é muito usado em jornais e portais de notícias.

Grid de linha de base

O grid de linha de base serve como referência visual para a disposição horizontal de elementos gráfico e principalmente para modular o texto escrito por meio de suas linhas de base. Ele serve como referência para o posicionamento e dimensionamento de todos os elementos textuais e contribui para a consistência visual do texto escrito.

Exemplo de uso do grid da linha de base de Jort de Vries.

Mancha gráfica

A mancha gráfica é o espaço delimitado pelas margens, é o espaço “útil” do livro ou periódico. Genericamente podemos classificar a mancha gráfica em duas categorias: densa e suave.

Mancha gráfica densa

Exemplo de mancha gráfica densa.

Quando as margens são pequenas e o conteúdo preenche mais intensamente a página. A mancha densa dá mais peso visual à pagina e geralmente é utilizada em produtos de comunicação que precisam demonstrar visualmente um grande volume de informação, como jornais e algumas revistas, por exemplo.

Mancha gráfica suave

Exemplo de mancha gráfica suave.

É quando as margens são mais generosas e existe mais espaço em branco na página. Nesse caso a página se torna mais suave visualmente. Manchas gráficas suaves são geralmente usadas em produtos de arte, poesia e alguns romances.

A mancha gráfica também pode ser construída de forma simétrica, assimétrica ou irregular.

Exemplo de mancha gráfica simétrica.

A mancha gráfica simétrica é a mais comum em projetos gráficos editoriais, ela pode ser observada em páginas onde existe uma simetria visual. Esse tipo de mancha gráfica resulta em uma página equilibrada visualmente mas também mais conservadora.

Exemplo de mancha gráfica assimétrica.

Exemplo de mancha gráfica assimétrica. As manchas gráficas assimétricas são aquelas em que as margens são visualmente assimétricas, mas mantém uma certa consistência visual, principalmente porque as margens mantém uma certa proporção. Elas são menos tradicionais e podem ser um diferencial em projetos mais ousados graficamente.

Exemplo de mancha gráfica irregular

Já as manchas gráficas irregulares são aquelas onde não há uma consistência visual nas margens. Elas são recomendadas em projetos que requerem muita ousadia já que podem gerar desconforto e estranhamento aos leitores.