Servio Nacional de Aprendizagem Industrial SENAI

Tipografia
Reinaldo Antonio Camargo Rauch Web Design Professor 2 Mdulo Curso Tcnico em Informtica

Ponta Grossa, 2011

Introduo:
Dentre vrios componetes de um site, a tipografia um dos mais importantes j que ele que organiza o contedo do site. Este trabalho traz um resumo do que seria a Tipografia, como utiliz-la e por que diferente de serifa. Outro componente, no s de sites mas tambm de todo o mundo da informtica, o sistema de cores RGB, que sem ele, no seria possvel ver as cores no computador. Este trabalho tambm traz um resumo do sistema de cores RGB e seu uso na internet.

Desenvolvimento:
Tipografia:
Tipografia a arte de organizar letras, palavras, frases, na composio de um texto. utilizada em qualquer lugar onde se utilize palavras escritas como revistas, jornais, outdoors, placas, sites, etc. A principal funo da tipografia dar ordem, legibilidade e compreenso a textos. Em design grfico, a tipografia extrapola isto e se concentra mais na arte do que no significado, como por exemplo quando um designer faz um busto utilizando palavras. A tipografia se utiliza de formas de letras, os tipos, para conseguir os efeitos desejados nos diferentes tipos de texto que podem ser escrtitos. Principalmente com o objetivo de dar clareza ao texto, os tipos no podem ser muito escuros e/ou tenham muitas curvas. Muitos confiundem tipografia com serifa, mas serifa est dentro da tipografia, que seriam as letras serifadas como por exemplo o tipo Times New Roman , que utiliza estas pontinhas nas letras para dar um efeito de ligao entre as letras. Atualmente a tipografia tem mais foco para o densenlvolvimento para WEB, tanto pelo aumento de popularidade da internet, quanto pelo decaimento do material impresso. Pela maioria dos webdesigners, o tamanho da fonte para um site est bom em 12 ou 13 pixels, j para o ttulo est acargo do do contedo do site, da criatividade do des igner, do pblico do site entre outros, alm de se manter um tamanho constante em todo o site para que no confunda o visitante. Outro aspecto importante o espaamento entre as linhas, que tambm, segundo a tipografia, deixam o texto mais fcil de ler e de compreender. Para um tamanho de fonte 12px, o recomendado um espaamento de 15px que pode servir para o espaamento entre os , pargrafos. Um complemento a esta ideia deixar uma margem rasovel da lateral do site, que ajuda o leitor a se concentrar no texto. Tambm importante o contraste do texto com o fundo, para ficar mais agradvel a leitura, apesar de no haver muitos sites com fundo verde-limo e o texto vermelho-sangue. Uma boa combinao um fundo preto com letras cinzas. O mais clssico s eria letras com cores escuras num fundo mais claro. Pode-se mudar a cor de partes do texto para uma leitura mais rpida e, com isso, gerar um resumo das partes importantes do texto em que o leitor deveria prestar mais ateno. Mais um aspecto a largura do bloco de texto, que no deve ser muito grande pois cansaria o leitor. Serve tanto para textos curtos ou longos. Um jeito de calcular essa largura

multiplicando o tamanho do tipo por 30. Como por exemplo se uma fonte tiver tamanho 12 a largura do bloco no poderia passar de 360 pixels.

Sistema RGB:
O sistema RGB um sistema de cores criado originalmente para ser usado nas primeiras televises cores criadas. baseado nas cores Vermelho (Red), Verde (Green), Azul (Blue). dito um sistema aditivo, pois utilizado em objetos que geram fotons, como por exemplo um monitor, uma tv de LCD, em contrapartida do sistema CMYK que um sistema subtrativo, justmente por se utilizado em objetos que absorvem luz, como o papel. utilizado na internet por ser uma convenso de vrios nomes da indstria, como a HP, a Microsoft e ser o padro adotado pela W3C para internet. Por causa disto, a maioria dos computadores, cmeras digitais e impresoras para consumidores de baixo e mdio poder aquisitivo s tem o espao de cor sRGB para utilizao. O cdigo de cores do sistema RGB uma triordenada de nmeros inteiros que indicam a intensidade de vermelho, verde e azul que vo de 0 at 255, utilizando um byte para cada coordenada como por exemplo o branco representado (255,255,255) onde todas as trs cores esto com inensidade mxima. Cada vetor tambm pode ser representado de 0 at 1, com um nmero fracionado entre eles, exemplo vermelho (1.0,0.0,0.0), por porcentagem (100%,0%,0%) como por exemplo denovo o vermelho, em nmero hexadecimal #FF0000, e em 16 bits (65535,0,0). No HTML, na reviso 3.0, so definidas 16 cores por nome que podem ser utilizados: y y y y y y y y y y y y y y y White em Hexadecimal #FFFFFF Silver em Hexadecimal #C0C0C0 Gray em Hexadecimal #808080 Black em Hexadecimal #000000 Red em Hexadecimal #FF0000 Maroon em Hexadecimal #800000 Yellow em Hexadecimal #FFFF00 Olive em Hexadecimal #808000 Lime em Hexadecimal #00FF00 Green em Hexadecimal #008000 Aqua em Hexadecimal #00FFFF Teal em Hexadecimal #008080 Blue em Hexadecimal #0000FF Navy em Hexadecimal #000080 Fuchsia #FF00FF

Purple #800080

Mas nas folhas de estilo, onde melhor definir ou mais preciso definir as cores, s colocar a iterao color e depois, por padro, o cdigo hexadecimal, mas podendo ser utilizado as outras notaes:

/* Modelo RGB */ p { color: #F00 } /* #rgb */ p { color: #FF0000 } /* #rrggbb */ p { color: r gb(255, 0, 0) } /* area inteira 0 - 255 */ p { color: rgb(100%, 0%, 0%) } /* area de ponto flutuante 0.0% 100.0% */

Concluso:
Tipografia e o RGB so elementos fundamentais na composio de um site, mas, com estes cursos Web Designer em 6 meses com qualidade duvidosa, muita gente passa despercebida por estes detalhes importantes.

Referncias:
1. en.wikipedia.org/wiki/Typography Data Acesso: 14/08/11 2. pt.wikipedia.org/wiki/Tipografia Data Acesso: 14/08/11 3. webmaster.pt/principios-tipografia-web-4214.html - Data Acesso: 14/08/11 4. desenvolvimentoparaweb.com/design/tipografia-com-foco-ao-web-design-

consideracoes-sobre-fonte-tipo-tipologia-e-tipografia/ - Data Acesso: 14/08/11

5. webinsider.uol.com.br/2003/03/03/tipologia-ou-tipografia-nao-use-o-termo-errado/ -

Data Acesso: 13/08/11

6. en.wikipedia.org/wiki/RGB Data Acesso: 14/08/11 7. pt.wikipedia.org/wiki/RGB Data Acesso: 14/08/11 8. en.wikipedia.org/wiki/SRGB_color_space Data Acesso: 14/08/11 9. en.wikipedia.org/wiki/Web_colors Data Acesso: 14/08/11