tipografia

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Tipografia para Sites Web
Tipografia
Tipografia é a arte e a técnica de arranjar as fontes para tornar a linguagem escrita legível e bonito.
A tipografia (do gregos typos — "forma" — e graphein — "escrita") é a arte e o processo de criação na composição de um texto, física ou digitalmente. Assim como no design gráfico em geral, o objetivo principal da tipografia é dar ordem estrutural e forma à comunicação escrita. Por analogia, tipografia também passou a ser um modo de se referir à gráfica que usa uma prensa de tipos móveis.
Fonte: https://pt.wikipedia.org/wiki/Tipografia
fontes com serifa
São fontes que possuem adornos em suas extremidades para melhor fluidez da leitura
Por outro lado, elas tornam o texto mais carregados de elementos do que fontes sem serifa
Fontes sem Serifa
têm aspecto mais simplificado. 
Não têm o ornamento que proporciona fluidez
em contrapartida podem tornar o texto mais leve.
Fontes Cursivas
Apresentam aspecto de feitas à mão. 
Não são funcionais para web, mas podem estilizar elementos em alguma situação específica.
http://1.bp.blogspot.com/-uRxFoHjPcPc/VOJbCq9JPaI/AAAAAAAAE2k/qlVlVSAzkmM/s1600/100_fontes_cursiva_bauzinhodaweb.PNG
Monospace
Todos os caracteres das fontes monospace possuem a mesma largura fixa. 
é frequentemente utilizado para códigos fontes
Exemplos de tipos: Courier, Prestige Elite, Fixedsys e Monaco
Fantasy
São fontes puramente decorativas, mas que ainda representam caracteres. 
Normalmente não possuem uma boa legibilidade.
Exemplos de tipos: Papyrus, Impact, Haettenschweiler, Copperplate
Fonte: https://tableless.com.br/um-guia-completo-de-tipografia-para-a-web/
Propriedade CSS font-Family
font-family: 'Fonte 1', 'Fonte 2', 'Fonte 3', sans-serif;
A declaração das fontes no CSS também aceita aspas duplas e até pode aceitar fontes sem aspas
É uma boa prática colocamos as fontes entre aspas simples para mantermos um padrão e para agrupar fontes de nome composto
A primeira fonte declarada é a mais importante. Caso o navegador não a encontre, deverá buscar a seguinte e assim por diante
serif uma palavra-chave de fonte que o CSS reconhece
Outras palavras-chave : sans-serif, monospace, cursive e fantasy
Recomendações Gerais para o uso de fontes
Use tamanho de fontes entre 15 e 25 pixels
Use tamanho de fontes entre 15 e 25 pixels
Use tamanho de fonte grande para as manchetes
Use espaçamento entre linhas entre 120 e 150%
(css – line-height)
Use espaçamento entre linhas entre 120 e 150%
(css – line-height)
45 a 90 caracteres por linha
css: unidade de medida ch
45 a 90 caracteres por linha
css: unidade de medida ch
Tipos de Fontes
TrueType
Criada nos anos 80 pela Apple e implementada pela Microsoft no Windows 3.1, são fontes altamente escaláveis e leves em conjunto de caracteres. São as fontes mais comuns de entrar, sua extensão é .ttf.
OpenType
As fontes OpenType foram criadas pela Microsoft em 1994, baseadas nas fontes TrueType, com a intenção de suportar um maior número de caracteres e outros idiomas. Sua extensão é .otf.
PostScript
Foi criado pela Adobe e é voltada principalmente para impressão, pois possui alta definição e grande compatibilidade com impressoras. As seguintes extensões compõem a fonte: .afm, .pfb e .pfm
Use fontes de qualidade
Sans-serif
Serif
Mais suave
Proposito tradicional
Clean
Livroimpresso
Usada em sites modernos
Leituraslongas
Sites com fontes para download
Google Fonts: fonts.google.com
TypeKit: https://typekit.com/fonts
dafont.com
Google web fontes
Licença de Fontes
Existem fontes pagas, além de outras com licença gratuita para uso não-comercial e de licença 100% livre. 
Como incorporar uma fonte no site via CSS
@font-face
permite que adicionemos fontes específicas em nosso site e o usuário poderá vê-las mesmo que não as tenha em seu computador. 
@font-face {
	font-family: 'Open Sans';
	src: url('../fonts/OpenSans-Regular.ttf');
	font-style: normal; /* opcional */
	font-weight: 400; /* opcional */	
}
Para mais informações acesse o link: 
https://tableless.com.br/font-face-fonts-externas-na-web/
Incorporando uma fonte disponível na web
Também é possível utilizar fontes específicas incorporadas de serviços como o Google Fonts.
Nota 1: quanto maior o número de fontes incorporadas em uma página, maior será o tempo para carregar. 
Nota 2: As fontes carregadas diretamente do Google Fontes, por exemplo, podem fazer com que a sua página demore mais para carregar, pois dependem de outro servidor.
<link href="https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i" rel="stylesheet">
Composição de fontes no layout
Hierarquia
Trata-se da forma em que será conduzido o olhar do usuário para facilitarmos a localização das informações 
Deixa evidente que que título é título e que parágrafo é parágrafo. É o princípio que propõe a atribuição de estilos específicos para cada elemento tipográfico de acordo com sua importância no conteúdo
Consistência e Proporção
om o uso da proporção, o layout adquire maior consistência 
Composição de fontes no layout
Contraste
A relação da cor do texto com a cor ou imagem do fundo, a espessura da fonte, a altura da linha e as margens definem o contraste que o bloco de texto irá produzir.
Pouco contraste dificulta a leitura e muito contraste pode tornar a leitura cansativa.
Quando a cor do fundo for completamente branca um cinza bem escuro como #333 ou #444 é mais confortável para leitura do que o preto total (#000).
Composição de fontes no layout
Ritmo
o espaçamento entre os caracteres (letter-spacing) ou entre as palavras (word-spacing) determinam o ritmo da leitura do usuário.
Ritmo vertical: espaçamento entre linhas (line-height)
Espaço
Os blocos de texto devem estar alocados em espaços adequados
Em telas de largura menor, alocar aproximadamente 100% de largura para melhor alocar o texto.
Combinação de fontes no layout
Algumas fontes combinam melhor com outras
Ou por que se diferenciam bem ou por terem características em comum.
Ferramenta para testar a composição de fontes
https://www.canva.com/font-combinations/
Diagramas de combinação de fontes
http://www.fastprint.co.uk/Assets/User/650-google-fonts-infographic-new.jpg
http://www.as8.it/handouts/mixing-typefaces_U&lc1992.pdf
Alguns estilos com CSS
Contraste adequado, numa tela de fundo branco
Página fica menos densa e a leitura mais agradável
Pode usar mais contraste nos títulos
body{ 
 font-family: 'Lato', 'Arial', sans-serif; 
 color: #666; 
} 
.titulo {
	padding: 10px 0 10px 10px;
	margin-left: -20px;
	color: #222;
	border-bottom: 2px dotted #0CC;
	border-left: 10px solid #0CC;
}
Recursos tipográficos
Letra Capitular - CSS
Letra capitular é um estilo tipográfico que podemos utilizar para destacar parágrafos de maior importância. 
Um recurso de estilização herdada do do design impresso tradicional
.capitular:first-letter {
 background-color: #666;
 float: left;
 color: #FFF;
 font-size: 2em;
 line-height: 1.25em;
 padding: 0 .2em;
 border-radius: 5px;
 margin-right: .1em;
}