# Tipografia

A tipografia está presente na maioria das interações do usuários com a CGTi. Ela está em nossos sistemas, páginas web e e-mails contribuindo para como a marca será percebida. Assim é importante que a escolha adequada de fontes seja utilizada.

<p class="callout info">**Destaques** - Sempre que possível utilize Space Grotesk para os cabeçalhos e peças de design gráfico.  
- Raleway e Lato serão as fontes do conteúdo do texto ou de interface.  
- Em mídias descentralizados, como e-mails ou documentos, escolha uma fonte de sistema para evitar problemas ao usuário.</p>

### Pilha de Tipos

- Space Grotesk ([link](https://fonts.google.com/specimen/Space+Grotesk))
- Raleway ([link](https://fonts.google.com/specimen/Raleway))
- Merryweather ([link](https://fonts.google.com/specimen/Merriweather))

### O Tipo para cada contexto

Estamos presentes em contextos diversos, por isso quando não houver controle sobre como nossa fonte será usada temos de nívelar pelo que o usuário possui em seu computador.

<table border="1" id="bkmrk-m%C3%ADdia-fonte-do-cabe%C3%A7" style="border-collapse: collapse; width: 100%; height: 147.172px;"><colgroup><col style="width: 19.5303%;"></col><col style="width: 23.6094%;"></col><col style="width: 23.6094%;"></col><col style="width: 33.3745%;"></col></colgroup><tbody><tr style="height: 46.5938px;"><td style="height: 46.5938px;">**Contexto**</td><td>**Fonte em Imagens  
(design Gráfico)**</td><td style="height: 46.5938px;">**Fonte do Cabeçalho**</td><td style="height: 46.5938px;">**Fonte do Texto ou UI**</td></tr><tr style="height: 29.7969px;"><td style="height: 29.7969px;">Web</td><td>Space Grotesk</td><td style="height: 29.7969px;">Space Grotesk</td><td style="height: 29.7969px;">Raleway</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">Papelaria

</td><td>Space Grotesk</td><td style="height: 35.3906px;">Raleway</td><td style="height: 35.3906px;">Raleway</td></tr><tr><td>Documentos Digitais

</td><td>Space Grotesk</td><td>Arial</td><td>Arial</td></tr><tr style="height: 35.3906px;"><td style="height: 35.3906px;">E-mail

</td><td>Space Grotesk</td><td style="height: 35.3906px;">Arial</td><td style="height: 35.3906px;">Arial</td></tr></tbody></table>

#### Alternativas do sistema

Windows:

- sem serifa: Lato ou Arial
- com serifa: Times New Roman

Android:

- Noto ou Roboto

Ecosistema Apple:

- SF Sans

#### Exemplos de Aplicações

<table border="1" id="bkmrk-exemplo-de-e-mail-ca" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td>[![image.png](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2023-12/scaled-1680-/lAYimage.png)](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2023-12/lAYimage.png)  
</td><td>[![image.png](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2023-12/scaled-1680-/8Kwimage.png)](https://consultic.sorocaba.sp.gov.br/uploads/images/gallery/2023-12/8Kwimage.png)</td></tr><tr><td>**Exemplo de e-mail**

Cabeçalho, botões e rodapé são imagens que usam Space Grotesk.

Texto em Arial.

</td><td>**Exemplo de poster**

Cabeçalho em Space Grotesk

Texto em Raleway

</td></tr><tr><td>  
</td><td>  
</td></tr><tr><td>  
</td><td>  
</td></tr></tbody></table>