GRID E COMPOSIÇÃO

AULA 3

Prof. Fabiano de Miranda

CONVERSA INICIAL

Em momento anterir, já vimos como as estruturas visuais se

desenvolveram com o passar dos séculos até se consolidarem no meio editorial
em meados dos anos 1950, com destaque para os consagrados grids
tipográficos e já exploramos também um pouco mais a fundo o grid como forma
estruturante de conteúdos em publicações. Tratamos da conceituação de grids
e da sua importância no projeto gráfico de livros, revistas, jornais e similares;
analisamos a anatomia de um grid tipográfico padrão; exercitamos como
produzir e aplicar grid; e conhecemos algumas de suas variações mais
comumente utilizadas no meio editorial.
Agora vamos parar um pouco para observarmos mais de perto este último
tópico. Como sabemos, há pelo menos três modelos específicos de grids
tipográficos que são bastante utilizados em publicações editoriais: o grid
retangular (ou grid de uma coluna); o grid de duas ou mais colunas (ou grid de
múltiplas colunas); e o grid modular.
O objetivo desta aula será nos aprofundarmos mais nesses tipos de grid
tipográfico. Analisaremos alguns exemplos e forneceremos algumas sugestões
para a sua correta aplicação, bem como avaliaremos os contextos nos quais o
uso desses grids é mais adequado. Indo além, nesta aula também exploraremos
juntos outra configuração de grid bastante comentada na literatura
especializada: o grid hierárquico.
Para finalizarmos, pensaremos na dinâmica de transposição dos
conhecimentos aqui apresentados para as suas possíveis aplicações no meio
digital. Dessa forma, nos aprofundaremos nas características do grid tipográfico
flexível aplicado às publicações digitais.

CONTEXTUALIZANDO

Compreender a criação e o uso dos diferentes tipos de grid é de

fundamental importância para qualquer bom profissional do meio editorial. Ao
abrirmos uma revista, um jornal, um livro, um site ou qualquer outra publicação
editorial, seja digital ou impressa, nos deparamos com variados tipos de grids.
Mas o que levou o projetista a escolher aquele grid específico e não algum outro?
Como eu consigo reconhecer esses grids? E como eu posso aplicá-los da melhor
 forma? Essas são algumas das situações-problema que iremos explorar nesta
aula.

TEMA 1 – GRID RETANGULAR

Como o próprio nome sugere, o grid retangular é composto por um único

retângulo que usualmente ocupa a maior porção da área de uma página e está
cercado por suas margens (Samara, 2007; Lupton, 2013). Por esse motivo, o
grid retangular também é popularmente conhecido no meio editorial como grid
de uma coluna, considerado o mais simples de todos.
Agora observe a figura 1 para relembrarmos a aparência dessa variação
de grid tipográfico.

Figura 1 – Exemplo de grid retangular

Fonte: Elaborado pelo autor.

Como se sabe, alguns autores chegam a considerar esse tipo de grid

como simplório por sua simplicidade. Confira isso nas palavras de Peruyera
(2018, p. 167), por exemplo: “perceba que o grid de 1 coluna é bastante
simplório, ao passo que o de 2 colunas apresenta páginas mais simétricas e com
um ar de seriedade talvez até excessivo”.
Por outro lado, Samara (2011) aponta para os desafios que um grid de
uma coluna pode representar para compor páginas atraentes e que quebrem a
monotonia de forma harmoniosa e instigante para o leitor. Segundo o autor, “criar
3
 interesse visual, conforto e estímulo é importante para envolver o leitor de forma
contínua durante longas sessões de leitura” (Samara, 2011, p. 68).
Lupton (2013) recomenda pensarmos nos grids tipográficos de
publicações como livros e revistas em sequências de páginas duplas, não como
páginas individuais. Em consequência disso, os pares de manchas gráficas – no
caso, os retângulos dos grids de ambas as páginas – podem ser dispostos de
diversas maneiras. Podemos posicioná-las simetricamente e espelhadas;
podemos fazer composições assimétricas; podemos propor estruturas diferentes
para cada página; e assim por diante.
É possível também calcular a posição dos elementos nas páginas com
base em fórmulas como a proporção áurea. As possibilidades são muitas e
depende do projetista avaliar qual é a mais adequada para cada situação.

1.1 Aplicações do grid retangular

Como forma tradicional e uma das mais antigas de se configurar layouts

de páginas, o grid retangular normalmente é usado em textos longos, como
livros, relatórios, documentos acadêmicos e assim por diante. Como se sabe, o
grid retangular já era utilizado em manuscritos medievais e mais tarde acabou
se tornando também o padrão para os livros impressos (Samara, 2011).
De acordo com Beth Tondreau, em seu livro Layout Essentials: 100 design
principles for using grids, o grid de uma coluna deve ser usado “quando trabalhar
com texto contínuo, como uma tese, relatório ou livro. Uma única coluna de texto
pode parecer menos intimidadora e mais elegante do que múltiplas colunas,
tornando-o adequado para livros de arte e catálogos” (Tondreau, 2009, p. 12).
Na Figura 2, podemos conferir um exemplo de aplicação do grid retangular
com uma imagem integrada na página.

4
 Figura 2 – Exemplo de uso do grid retangular

Fonte: Elaborado pelo autor.

Esse é um bom exemplo de como podemos explorar o grid retangular a

fim de compor páginas harmoniosas e interessantes para os leitores da nossa
publicação.

Saiba mais

1. Acesse o link a seguir e veja como aplicar um grid retangular no

InDesign de um jeito bem prático e rápido:
GRID de colunas no Indesign e a economia de tempo. Marco Mazzarotto,
3 jun. 2018. Disponível em: <https://youtu.be/Ba_lURgDcu4>. Acesso em: 27
abr. 2019.
2. Trabalhando com o grid de linha de base
O chamado grid de linha de base (baseline grid) consiste no conjunto de
linhas-guia que auxiliam nos alinhamentos horizontais dos elementos gráficos
em um projeto. Lupton (2013) afirma que os grids de linha de base controlam
toda a composição de um documento. Segundo a autora, “o grid de linha de base
serve para ancorar todos (ou quase todos) os elementos do leiaute [layout] a um
ritmo comum” (Lupton, 2013, p. 194).

Dependendo do resultado pretendido para o seu trabalho, os

alinhamentos horizontais (guiados pelas linhas) podem ser tão ou até mesmo

5
 mais importantes do que os alinhamentos verticais (guiados pelas colunas).
Nesse sentido, o objetivo primário aqui é alcançarmos uma composição
harmoniosa e uniforme dos textos e das imagens na página.
Quanto à aplicação dos grids de linha de base, Peruyera (2018, p. 177)
nos lembra que “os programas de paginação têm configurações que fazem com
que as letras das caixas de texto fiquem alinhadas em sua linha de base
(baseline), fazendo com que os textos fiquem perfeitamente alinhados, até
mesmo os de boxes”.

Saiba mais

1. Descubra como criar um grid de linha de base usando o InDesign:

COMO criar um grid de linha de base no InDesign. Marco Mazzarotto, 3
jun. 2018. Disponível em:
<https://www.youtube.com/watch?v=5QFZ_gQKWo8&feature=youtu.be>.
Acesso em: 27 abr. 2019.
2. Para ter dicas de como elaborar uma estrutura harmoniosa em um grid
de linha de base veja nas páginas 194 e 195 do livro a seguir:
LUPTON, E. Pensar com tipos: guias para designers, escritores, editores
e estudantes. 2. ed. São Paulo: Cosac & Naify, 2013.
3. Acesse o link as seguir e veja como o grid de linha de base pode ser
usado no InDesign:
ATIVIDADE 4: Grid da linha de base. Marco Mazzarotto, 21 out. 2018.
Disponível em: <https://youtu.be/IrW2SU2vle0>. Acesso em: 27 abr. 2019.

TEMA 2 – GRID DE MÚLTIPLAS COLUNAS

O grid de múltiplas colunas é tão versátil e flexível quanto variado na sua

forma de apresentação. Podemos considerar nessa categoria os grids
tipográficos de duas colunas, bem como os de três, quatro, cinco, seis... Como
veremos mais adiante, em alguns casos o grid pode ter até mesmo mais de vinte
colunas! Autores como Tondreau (2009), Lupton (2013) e Peruyera (2018)
apontam que quanto maior o número de colunas, maior a flexibilidade para a
composição dos layouts.
Na Figura 3, podemos conferir um exemplo de um grid de múltiplas
colunas.

6
 Figura 3 – Exemplo de grid de três colunas

Fonte: Elaborado pelo autor.

Como vimos anteriormente, o número de colunas que usaremos está

diretamente relacionado com o tamanho da página que temos disponível. Em
geral, páginas maiores comportam um número maior de colunas do que páginas
menores. Segundo Peruyera (2018), o cálculo aproximado seria de colunas com
a largura de 5 centímetros para uma leitura confortável. Assim, uma página com
30 centímetros de largura comportaria até 6 colunas.
Com base nesse raciocínio, podemos compreender por que é tão comum
encontrarmos revistas que utilizam grids com três colunas, enquanto jornais
usualmente apresentam cinco ou seis colunas. De fato, tanto Peruyera (2018)
quanto Collaro (2012) insinuam que o uso de até quatro colunas em uma página
dá uma “aparência de revista” ao material. Com mais do que isso teríamos a
aparência de um jornal. No entanto, cuidado aqui! Devemos ter em mente que
isso não deve ser encarado uma regra rígida a ser seguida a todo custo, pois
sempre há exceções bem-vindas aos nossos projetos.

7
 Saiba mais

1. Veja neste pequeno tutorial como criar um grid de múltiplas colunas

usando o InDesign:
GRID: como fazer um grid de colunas no InDesign. Marco Mazzarotto, 3 jun.
2018. Disponível em:
<https://www.youtube.com/watch?v=vIUEYjR6H6g&feature=youtu.be>. Acesso
em: 27 abr. 2019.
2. Para projetos um pouco mais avançados, veja como fazer um grid com
colunas de larguras diferentes no InDesign:
GRID: como fazer um grid de colunas diferentes no InDesign. Marco
Mazzarotto, 3 jun. 2018. Disponível em: <https://youtu.be/-bkdiAq9xN0>.
Acesso em: 27 abr. 2019.

2.1 Aplicações do grid de múltiplas colunas

Os exemplos de aplicação do grid de múltiplas colunas são tão variados

quanto o número de colunas possível para os layouts. Para se ter uma ideia,
podemos considerar aqui como integrantes dessa categoria de grids tipográficos
desde a Bíblia de Gutenberg, produzida em 1455 com duas colunas de texto, até
os mais atuais sites da internet com múltiplas divisões verticais do seu espaço
gráfico.
De revistas a jornais, digitais ou impressos, as múltiplas colunas são muito
utilizadas no meio editorial (Figura 4).

8
 Figura 4 – Exemplo de uso do grid de três colunas

Fonte: Elaborado pelo autor.

Como tratamos anteriormente, algumas configurações do grid de

múltiplas colunas são mais comuns em certos tipos de publicação do que em
outros. Por exemplo, tanto Collaro (2012) quanto Peruyera (2018) apontam que
a fragmentação do espaço gráfico em múltiplas colunas facilita a inserção de
peças publicitárias em publicações que dependem da venda de espaços para
essa finalidade, como é o caso da maioria dos jornais e revistas. Esse tipo de
organização possibilita a divisão da página em espaços menores, tornando
assim os custos mais acessíveis e atraentes para empresas pequenas e médias
(Collaro, 2012). O mesmo não ocorre em livros, por exemplo, nos quais o grid
retangular de apenas uma coluna é praticamente soberano.
Obviamente, as questões comerciais não são as únicas e nem as mais
importantes que podem influenciar na escolha do número de colunas de uma
publicação. Em última instância, tudo dependerá dos resultados
comunicacionais pretendidos, a fim de produzir materiais instigantes e eficazes
para o cada público específico.

TEMA 3 – GRID MODULAR

Vimos na última aula que um grid modular é composto por linhas

horizontais e verticais que dividem a página em uma espécie de matriz, formando

9
 células retangulares chamadas de módulos (Samara, 2011). Segundo Lupton
(2013, p. 191), “esses módulos governam o posicionamento e o enquadramento
de textos e imagens”.
De acordo com Samara (2011), o grid modular apresenta diversas áreas
(ou zonas espaciais) que podem ser ativadas individualmente ou em conjuntos,
na horizontal ou na vertical, de forma a acomodar da melhor maneira os
conteúdos na página, criando composições personalizadas para cada tipo de
necessidade. Isso faz com que eles sejam eficientes para coordenar grandes
sistemas de informação sem torná-los monótonos (Samara, 2011).
Haslam (2007), por sua vez, reafirma a flexibilidade para acomodar
conteúdos, característica dos grids modulares. De acordo com o autor:

Os campos da grade [grid] oferecem uma ampla variedade de formatos

de imagem: quanto mais campos na grade, maior será o número de
potenciais formatos de imagem” e conclui que “quanto mais complexo
for um sistema de grades [grids], maior será o número de possíveis
variações do layout (Haslam, 2007, p. 58).

Na Figura 5, podemos ver o exemplo de um grid modular típico.

Figura 5 – Exemplo de grid modular

Fonte: Elaborado pelo autor.

Como já sabemos, o grid modular é uma herança direta do pensamento

funcionalista no design, associado ao conceito de racionalidade, organização e
clareza. Suas raízes remetem às contribuições da Bauhaus, da Nova Tipografia

10
 e, finalmente, do modernismo característico do Estilo Internacional, conforme
atesta a importante obra Grid Systems in Graphic Design, de Joseph Müller-
Brockmann (1961/2015). Por isso mesmo, é comum que os designers usem grids
modulares a fim de transmitir essas mesmas ideias, como coloca Samara (2011).
De qualquer modo, a seguir veremos como a flexibilidade da configuração
desse tipo de grid permite usos diversos além daqueles imaginados por seus
precursores.

Saiba mais

1. Como criar um grid modular usando o InDesign:

GRID: como criar um grid modular utilizando o InDesign. Marco
Mazzarotto, 3 jun. 2018. Disponível em: <https://youtu.be/HDfUl2cvadI>. Acesso
em: 27 abr. 2019.
2. Para um conhecimento um pouco mais avançado, veja como criar um
grid modular no InDesign usando a grade do próprio documento:
GRID: grid modular utilizando a grade do documento. Marco Mazzarotto,
3 jun. 2018. Disponível em: <https://youtu.be/RJmKodKVVBM>. Acesso em: 27
abr. 2019.

3.1 Aplicações do grid modular

A flexibilidade do grid modular e sua versatilidade para diversas

aplicações em projetos editoriais fica ainda mais evidente nas palavras de
Tondreau (2009). Segundo a autora, “para grandes volumes de informação, tais
como aquelas de calendários, listas e tabelas, um grid modular ajuda a organizar
unidades de informação em partes controláveis. Também pode ser aplicado em
jornais, que possuem inúmeras zonas de informação” (Tondreau, 2009, p. 12).
Na Figura 6, podemos observar como o grid modular pode se comportar
para acomodar conteúdos diversos com boa desenvoltura e flexibilidade.

11
 Figura 6 – Exemplo de uso do grid modular

Fonte: Elaborado pelo autor.

Uma última reflexão sobre grids modulares é necessária neste ponto.

Conforme aponta Haslam (2007), apesar de toda a sua versatilidade e por mais
flexível que seja, esse tipo de estrutura visual também apresenta limitações que
podem comprometer layouts específicos. Como exemplo mais notável, temos
aquelas composições baseadas em conteúdos com um grande número de
desenhos e/ou fotografias. Segundo Haslam (2007, p. 60):

Os sistemas de grade que forçam o designer a cortar a imagem não

são adequados a catálogos de imagem/arte. Os trabalhos artísticos
precisam ser exibidos por inteiro. Como a maioria dos artistas usa
vários formatos, que não podem ser cortados – tentar posicionar esse
tipo de imagem dentro de uma grade modular é impossível. Nesses
casos, precisam ser aplicados sistemas de grade baseados em
estratégias menos dogmáticas.

A seguir, veremos mais um tipo de grid tipográfico, o qual ainda não

abordamos até o momento. Talvez essa abordagem, menos dogmática, seja
uma possível solução para o problema apontado pelo autor.

Saiba mais

Veja como criar um grid modular no InDesign e aplicar em um projeto de

um catálogo:

12
 GRID - Atividade 5. Marco Mazzarotto, 3 jun. 2018. Disponível em:
<https://youtu.be/eNo_iwwa2wQ>. Acesso em; 27 abr. 2019.

TEMA 4 – GRID HIERÁRQUICO

De acordo com Samara (2007), o grid hierárquico se faz necessário

quando as exigências particulares de um projeto não são satisfeitas por
nenhuma outra variação de grid. Nesse caso, pode ser planejado um grid
hierárquico personalizado, especialmente para acomodar aquele tipo específico
de informação. Por esse motivo, esse tipo de grid é recomendado para
profissionais que já apresentem certo domínio das práticas compositivos e do
uso de outros tipos de grid tipográfico.
Em um grid hierárquico, os elementos são dispostos de modo intuitivo nas
páginas por meio de estudos de interação óptica entre eles (Samara, 2007).
Após chegar a um resultado satisfatório de uma estrutura visual racional, ela será
então repetida em várias páginas ou telas. Este grid normalmente leva em
consideração o “peso” pretendido para cada um dos elementos gráfico-
informacionais na página, ou seja, é determinada uma hierarquia visual (ou
ordem de importância) desses elementos. Aí está a origem do nome desse tipo
de grid.
A seguir, na Figura 7, você pode conferir um exemplo de desenho possível
para um grid hierárquico.

13
 Figura 7 – Exemplo de grid hierárquico

Fonte: Elaborado pelo autor.

Devido à sua natureza flexível e adaptável, nos grids hierárquicos é

comum que as larguras das colunas e os respectivos espaços entre elas (as
calhas) possuam um tamanho variável (Samara, 2011). Por esse motivo, Samara
(2007, p. 29) também chega a ponderar que o grid hierárquico “é uma
abordagem quase orgânica da ordenação dos elementos e da informação que
ainda unifica arquitetonicamente todas as partes no espaço tipográfico”.

4.1 Aplicações do grid hierárquico

Para Tondreau (2009, p. 12), os grids hierárquicos “são frequentemente

úteis em websites simples, nos quais blocos de informações são ordenados para
proporcionar uma leitura mais fácil enquanto a tela é rolada para baixo.”. Da
mesma forma, Samara (2007; 2011) também aponta que as páginas na internet
são locais onde o grid hierárquico é comumente encontrado. Trataremos
especificamente da aplicação dos grids tipográficos no ambiente digital no
próximo tópico desta aula.
Assim, cabe salientar aqui que o grid hierárquico também pode ser
aplicado como estrutura visual para acomodar conteúdos em materiais
impressos. Conforme aponta Samara (2007), o grid hierárquico também auxilia
a deixar uniforme as várias faces em uma embalagem; ou mesmo as diversas

14
 páginas em um relatório corporativo; ainda, as diversas capas de várias edições
da mesma revista.
Na Figura 8, podemos observar uma aplicação possível para grids
hierárquicos. Cabe ressaltar aqui, entretanto, que, por sua natureza “quase
orgânica”, essa não é a única configuração disponível para esse tipo de grid. As
possibilidades são muito mais numerosas do que o espaço de que dispomos
nesta aula para preencher com exemplos.

Figura 8 – Exemplo de uso do grid hierárquico

Fonte: Elaborado pelo autor.

Por ser possível criar o grid hierárquico conforme as necessidades que

apresentam os conteúdos, essa pode ser uma boa alternativa quando os outros
tipos de grids demonstrados até aqui mostram-se muito rígidos e/ou
inadequados para um determinado projeto. Como sabemos, é possível
desconstruir, modificar ou mesmo não usar os grids tipográficos. Antes disso,
porém, talvez valesse a pena testar esses layouts aplicados em grids
hierárquicos, para assim verificar se os resultados comunicacionais ficam
conforme o esperado. No exemplo que colocamos anteriormente, das
composições baseadas em conteúdos com um grande número de desenhos
e/ou fotografias, talvez o grid hierárquico pudesse ser uma boa escolha para
compor essa publicação por sua maleabilidade.

15
 Conforme vimos até este momento no presente tópico, pela sua fluidez e
grande capacidade de adaptação a diferentes contextos e conteúdos, o grid
hierárquico também é bastante recomendado para a aplicação em interfaces
digitais, por exemplo, em sites e aplicativos. A seguir, observaremos mais
especificamente esse uso dos grids tipográficos e veremos outras possibilidades
disponíveis para compor layouts no meio digital.

TEMA 5 – GRID PARA PROJETOS DIGITAIS

Como podemos dividir o espaço gráfico para acomodar os conteúdos no

meio digital? Como se sabe, nesse meio, o espaço gráfico pode ser divido de
diversas maneiras.
Vimos anteriormente um pouco sobre o desenvolvimento histórico das
estruturas visuais aplicadas no meio digital e observamos que coube aos
designers de websites adaptar as linguagens de programação disponíveis
naquele momento da década de 1990 para organizar layouts interessantes para
o público. Analisamos como os primeiros grids tipográficos usados para dispor
conteúdos na web foram pensados como as estruturas visuais empregadas
tipicamente em tabelas, as quais consistem no cruzamento entre campos
verticais e campos horizontais de informações (Lupton, 2013).
A organização visual usando a dinâmica de tabelas nos remete aos grids
modulares, igualmente compostos por conjuntos de zonas espaciais horizontais
e verticais, conforme já vimos no Tema 3. Aqui também já vimos brevemente
que uma possibilidade especialmente popular para acomodar conteúdos no meio
digital é o grid hierárquico, o qual consiste em propostas específicas de arranjos
espaciais para cada situação comunicacional em particular. Por fim, outra opção
comum em publicações digitais atualmente é o uso do grid de múltiplas colunas.
Esse tipo de grid com oito, doze, dezesseis e por vezes até vinte e quatro colunas
se mostra bastante flexível para as demandas exigidas no meio digital.
A seguir, podemos observar na Figura 9 exemplos de grids tipográficos
típicos de interfaces digitais.

16
 Figura 9 – Exemplos de grids digitais com doze e dezesseis colunas

Fonte: Elaborado pelo autor.

Independentemente da solução escolhida, devemos esperar que os grids

tipográficos para o meio digital sejam flexíveis o suficiente para acomodar
conteúdos em situações de uso bastante variadas e ainda assim manter a
coerência visual do projeto como um todo.

5.1 Aplicações de grids digitais

De modo geral, Tondreau (2009) nos aponta que “múltiplas colunas são
usadas em websites para gerenciar uma enorme quantidade de informações,
que incluem narrativas, vídeos e anúncios” (Tondreau, 2009, p. 12, grifos
nossos). Lupton (2015), por sua vez, coloca que “os grids de hoje em dia, para
sites ou publicações complexos, consistem em múltiplas colunas – não é
incomum o uso de dezesseis delas” (Lupton, 2015, p. 54, grifos nossos). Com
base nisso, concluímos que é prática comum em projetos digitais o uso
recorrente do grid de múltiplas colunas adaptáveis, dividido por linhas horizontais
quando necessário. Conforme coloca Lupton (2015, p. 54):

Atualmente, as colunas verticais predominam na maioria dos grids. Um

design de revista, para mídia impressa ou digital, bem resolvido
tipicamente possui uma forte estrutura vertical de colunas, ancorada
por alguns poucos pontos horizontais.

17
 A seguir, você pode conferir na Figura 10 como esses grids com múltiplas
colunas podem acomodar layouts em meios digitais de publicação.

Figura 10 – Exemplos de uso de grids digitais com doze e com dezesseis colunas
com o conteúdo aplicado

Fonte: 960 Grid System, 2019.

Para finalizar o último tema desta aula, ressaltamos aqui que existem
recomendações de design para inúmeros dispositivos e plataformas digitais.
Cabe ao projetista, mais uma vez, conhecer essas especificações existentes e
assim decidir o que é mais adequado para cada trabalho.

Saiba mais

Design responsivo e grids responsivos

Em interfaces digitais, é comum termos que observar a necessidade de
um mesmo conteúdo ter que se adaptar aos diferentes tamanhos de tela
existentes, considerando dispositivos tão distintos quanto computadores de
mesa, tablets e celulares; bem como também considerarmos a variação na
orientação predominante da tela, isto é, na vertical ou na horizontal.
Tais variações exigem que um mesmo grid tipográfico possa mudar
facilmente o tamanho de seus módulos, colunas e/ou calhas para se adaptar. É

18
 aí que entra o chamado design responsivo (responsive design). Trata-se de uma
forma de pensar as estruturas visuais para que elas se adaptem às diferentes
situações de uso.
Um exemplo prático que podemos dar disso é a adoção de porcentagens
para determinar as larguras das colunas em vez de utilizar medidas fixas. Dessa
maneira, seja numa tela pequena ou numa tela grande, as proporções do layout
se manterão sempre constantes – por exemplo, a largura de uma coluna será
sempre de 25% da área total da largura da tela.
Também é possível programar os grids digitais para que, com base em
determinado tamanho de tela, o número de colunas aumente ou diminua: o
mesmo conteúdo em uma tela grande teria doze colunas, ao passo que em uma
tela pequena ele teria apenas quatro colunas.

Saiba mais

1. O livro de Ellen Lupton, Tipos na tela (2015), oferece diversas teorias

como suporte para a configuração de layouts no meio digital:
LUPTON, E. Tipos na tela: um guia para designers, editores, tipógrafos,
blogueiros e estudantes. São Paulo: GG Brasil, 2015.
2. O site 960 Grid System traz modelos de grids para a web com download
gratuito:
960 Grid System. Disponível em: <https://960.gs/>. Acesso em: 27 abr.
2019.
3. Extenso material do Google com dicas para compor layouts em
interfaces digitais (em inglês):
UNDERSTANDING layout. Material Design, S.d. Disponível em:
<https://material.io/design/layout/>. Acesso em: 27 abr. 2019.
4. Especificações da Apple para interfaces digitais (em inglês):
DESIGNING for iPhone. Developer, S.d. Disponível em:
<https://developer.apple.com/design/>. Acesso em: 27 abr. 2019.

TROCANDO IDEIAS

O desafio proposto neste Trocando Ideias é refletir sobre os pontos

positivos e negativos da utilização dos grids tipográficos. Liste ao menos dois
pontos de cada um e discuta com os seus colegas se todos concordam com os
pontos levantados.
19
 NA PRÁTICA

Para o exercício prático desta aula, faremos uma atividade de análise e

de reflexão sobre produtos editoriais já existentes. Essa atividade foi proposta
originalmente por Mazzarotto (2018, p. 195) em seu livro Design gráfico aplicado
à publicidade. Siga as instruções a seguir para fazer o exercício:

1. Leia esta aula;

2. Procure uma publicação com oito ou mais páginas;
3. Faça a análise descrita a seguir;
4. Escreva um texto de aproximadamente 200 palavras com a sua análise;
5. Bons estudos e bom trabalho!

Análise
Para realizar a análise conforme propõe Mazzarotto (2018),
primeiramente você deve procurar uma publicação que contenha oito ou mais
páginas. Pode ser uma revista, um jornal ou mesmo um livro. Escolhido o
material, tente identificar se ele possui o mesmo grid em todas as páginas e qual
é o tipo entre aqueles vistos nesta aula. Pegue folhas tamanho A3 em branco e
desenhe esse(s) grid(s) que você identificou. Escreva um texto de
aproximadamente 200 palavras analisando se, na sua opinião, os grids foram
bem empregados e por quê.

FINALIZANDO

Nesta aula, vimos com maior profundidade as particularidades de cada

um dos tipos de grid mais comumente usados em publicações editoriais, além
de analisarmos algumas das possibilidades para melhor aplicá-los.
Cabe ressaltar que aqui escolhemos propositalmente correr o risco de, em
alguns momentos, soarmos repetitivos com relação à aula anterior. Isso se
justifica pela importância do completo domínio da identificação, criação e correta
utilização do grid tipográfico no contexto das produções editoriais. Compreender
essa ferramenta e os seus pormenores é uma característica fundamental
desejada de todo bom profissional da área.
Dessa forma, em cada um dos tópicos da aula, tratamos de um tipo
diferente de grid tipográfico, analisando dicas para a sua aplicação e os
contextos nos quais cada um deles é mais adequado. Em um primeiro momento,

20
 vimos o grid retangular (ou grid de uma coluna); em seguida, analisamos o grid
de duas ou mais colunas (ou grid de múltiplas colunas); após isso, observamos
o grid modular; na sequência, o grid hierárquico; e finalizamos discutindo
aspectos de apresentação dos grids em projetos digitais.
Concluímos assim esta aula, em que contribuímos para mostrar a
importância das estruturas visuais voltadas para a produção editorial,
destacando a sua relevância por proporcionar comunicações mais claras,
organizadas e concisas.

21
 REFERÊNCIAS

COLLARO, A. C. Produção gráfica: arte e técnica na direção de arte. 2. ed. São

Paulo: Pearson Prentice Hall, 2012.

HASLAM, A. O livro e o designer II. São Paulo: Edições Rosari, 2007.

LUPTON, E. Pensar com tipos: guias para designers, escritores, editores e

estudantes. 2. ed. São Paulo: Cosac Naify, 2013.

_____. Tipos na tela: um guia para designers, editores, tipógrafos, blogueiros e

estudantes. São Paulo: Gustavo Gili, 2015.

MAZZAROTTO, M. Design gráfico aplicado à publicidade. Curitiba:

InterSaberes, 2018.

MÜLLER-BROCKMANN, J. Sistema de grelhas: um manual para designers

gráficos. 3. ed. Barcelona: Gustavo Gili, 2015.

PERUYERA, M. Diagramação e layout. Curitiba: InterSaberes, 2018.

SAMARA, T. Grid: construção e desconstrução. São Paulo: Cosac & Naify, 2007.

_____. Guia de tipografia: manual prático para o design de publicações. Porto

Alegre: Bookman, 2011.

TONDREAU, B. Criar grids: 100 fundamentos de layout. São Paulo: Blucher,

2009.

960 Grid System. Disponível em: <https://960.gs/>. Acesso em: 27 abr. 2019.

22