A tipografia é parte integrante de web design. Os vários usos de texto na web, a partir de grandes manchetes e blocos em negrito ao corpo pequeno, indicam a importância da tipografia, é uma combinação de arte e ciência.
Tipo está em toda parte, fazendo de tudo, todos os sites contam com texto e fonte para transmitir sua mensagem aos leitores. Muitos designers de tipo para tomar concedido e se concentrar nos aspectos mais fascinantes do projeto.
Porque tipografia é a Alma do Design Web
tipografia moderna começou com a invenção dos tipos móveis e da imprensa, embora tenha raízes na caligrafia antiga e já se ramificou em mídia digital. Tipografia é um termo amplo que engloba diversas áreas e profissões, de designers que criam tipo de letra para designers gráficos, que atribuem a fontes de texto e mandar o texto para publicação.
Tipografia é tão importante na web, pois é na impressão. O fato de que ele aparece na tela do computador e não em um pedaço de papel é imaterial, tipo ainda deve ser legível e agradável aos olhos.
Os designers devem adaptar suas técnicas para se adequar ao meio, seja ele de publicação, sinalização, embalagem ou na televisão. Por exemplo, um estilo de título que funciona bem em um spread de revista não necessariamente se adaptar a um cartaz. A revista é sempre visto em relativa proximidade, de modo espaçamento de letras pode ser tão apertado como você gosta e as palavras continuarão a ser legível. Um cartaz, mais frequentemente, é vista obliquamente, de modo que o texto será distorcido de alguma forma. Neste caso, um espaçamento de letras pouco mais iria ajudar o espectador a identificar os caracteres individuais e, assim, as palavras.
Projetando para uma tela de computador tem seus próprios problemas. Uma página web tem para trabalhar em sistemas operacionais diferentes e os tamanhos de tela. Designers precisam entender e abordar questões de plataforma cruzada se esperam manter o controle sobre o tipo tudo ao seu redor muda.
Tipografia Não importa em Web Design?
Tipografia é mais do que sobre a escolha de fontes, um web designer deve ser hábil na escolha de fontes adequadas, espaçamento entre as linhas de texto, tamanho e estilo do texto e mais, que vamos passar por cima neste artigo. Vamos explorar a tipografia a partir da perspectiva do web designer.instantShift - Tipografia em Web Design
Escolhendo Fontes
A primeira regra tipográfica para a web é este: vara para as fontes convencionais. Nem todo mundo tem a coleção extravagante de fontes que você faz, portanto, use fontes que todos os computadores têm.
* Fontes sans-serif Standard são:
Arial, Helvetica, Verdana, Genebra, Lucida Sans Unicode, Lucida Grande e Tahoma.
* Fontes serif padrão são:
Georgia, Times, Times New Roman, Palatino Linotype, Palatino e Antiqua Book.
Serif e fontes sem serifa têm finalidades diferentes, os primeiros são utilizados em livros e em situações de projeto especial, enquanto os últimos são usados em sites, porque eles são limpos e de fácil verificação. sans-serif também são usados em livros para crianças, porque o de letras são simples e este exerce sobre a vida adulta: fontes com serifa podem ser lidos por um período prolongado de tempo, mas fontes sem serifa podem ser lidos mais rapidamente.Dicas para Clear Type
* Altura da Linha
maioria dos web designers já sabe disso, mas a altura da linha é importante tanto para a legibilidade e estética. Usando a medição in em CSS é a melhor maneira de alcançar um equilíbrio orgânico vertical. Para copiar número, utilizando entre 1.2em 1.4em e é uma aposta segura, o leitor será capaz de distinguir as linhas de texto.
* Limite o número de tipos de letra
É fácil se perder no mar de tipos interessantes, mas não deixe que ele mostra o seu desenho final. Páginas que contêm uma grande quantidade de fontes são repugnantes desagradável. Coerência, que é vital para a concepção coerente, se perde. Eu não estou recomendando que você use apenas uma fonte, embora, manter duas ou três por página ou por site.
* Largura
Quando eu primeiro projetado layouts líquido, eu cometi o erro de não contabilização de resoluções de tela grande. Um número demasiado grande provavelmente vai ler, porque a leitura de uma linha de texto parece que leva uma eternidade. Não cometa o mesmo erro.
* Espaço em Branco e hierarquia da página
Use o espaço em branco para a sua vantagem. A noção de que tudo abaixo da dobra é ignorado é um mito. Use o espaço em branco para distinguir certas áreas do design, que deixa o resto olhos e orienta-los para áreas importantes da página. Embora o espaço em branco pode manter as coisas claras, você ainda precisa de manter uma hierarquia: se um elemento é mais importante que outro, que deveria ser evidente, e isso pode ser demonstrado com o tipo de maiores ou mais pesados. A hierarquia clara mostra rapidamente os usuários que é importante.
Como a tipografia afeta o processo de Design e do Produto
Criação e organização de estilos no início de um processo de design vai pagar mais tarde. Muitas pessoas apressadamente selecionar o texto e fontes ao preparar algo para mostrar ao cliente. Os protótipos mais o cliente quer ver e as mudanças que eles querem mais fez, mais tempo o processo torna-se e, em seguida, mudando até mesmo pequenas coisas leva um longo tempo. Quando o projeto está finalmente acabado e que você precisa para trabalhar com ele, você pode ter que recriar o documento e criar os estilos a partir do zero.
Eu vou apresentar o meu processo de criação e organização de estilos, que eu adotei para que eu possa mudar rapidamente tipos, tamanhos de fonte e de liderança sem ter que recriar nada. Se você estiver no campo da mídia de impressão e usando o InDesign, assim como eu, então dicas a seguir são muito úteis para você.instantShift - Tipografia em Web Design
Parágrafos, títulos, legendas
Usando esses delineadores é mais eficaz quando se trabalha com diversos estilos ou tipos de texto. Por exemplo, quando trabalhando em um livro, eu simplesmente usar um texto de parágrafo e três níveis de títulos. Eu também certeza de que tudo está bloqueado para a rede de referência, mas eu não trava nada no início. Em vez disso, ao criar os estilos, posso ter a certeza de que tudo vai se somando. Se eu definir o espaço antes e depois de um parágrafo, eu ter certeza de que adiciona-se à liderança do texto. Por quê? Para que eu possa testar rapidamente diferentes líder sem repetidamente mudando a grade de linha.Padrões de Estilo
. Os estilos de parágrafo primeiro eu vou falar são "padrão", "posição padrão" e "padrão parágrafo" Eu tendo a nomear meus estilos semanticamente, não há necessidade de usar nomes curtos enigmático; chamá-los de algo que faz sentido. No caso do livro, eu não precisarei de diversos estilos, para a criação de estilos "default" no pode ser um exagero, mas em projetos maiores, pode ser uma grande ajuda. Eu crio estilos padrão para que eu tenha algo em que basear outros estilos, que herdar todas as configurações, caso não tenham sido substituídos. Se você está acostumado a trabalhar com HTML e CSS, então você sabe a importância dos estilos herdados, especialmente quando os documentos de repente crescem e se tornam mais complexas.
O primeiro é o "default", estilo em que eu defino tudo: letra, levando, a justificação, tabulações, numeração (estilo antigo ou forro), características de tipo aberto, conjuntos de estilo, linguagem, compositor (parágrafo ou uma linha), a hifenização regras, etc
Base do "padrão parágrafo" no estilo padrão, de modo que ele herda as configurações escolhidas.
Em seguida, criar a "posição padrão" estilo, também baseado no estilo padrão. Aqui, eu delinear o que cada categoria terão em comum. No caso do livro, os cabeçalhos devem ser em uma fonte diferente, eu quero o texto do parágrafo em uma fonte com serifa e títulos no sans-serif.
Eu também criar o padrão n, mais uma vez baseado no estilo padrão. Eu não altere as opções neste estilo, porque ele deve herdar tudo, desde o estilo padrão.
Para parágrafos regular, posso criar dois estilos: o n º e do § nenhum travessão (os nomes indicam o que eles fazem). Baseio-los tanto no estilo padrão N, mas eu faço apenas as alterações de estilo de parágrafo, onde eu adiciono um recuo de primeira linha. Diversos outros estilos podem ser criados aqui (capitular, parágrafo inteiro recuado, citação, etc.)Indicar Tal como acontece com pontos regulares, crio três estilos baseado no estilo padrão da rubrica. Eu chamo-lhes algo como Título 1, Título 2 e Título 3. Eu só mudar algumas coisas no estilo de título padrão, tais como o tamanho eo espaçamento (e outros recursos, como small caps), porque a maioria é herdada.
O parágrafo primeiro guia, chamada "Geral", mostra como o estilo atual difere do que ele é baseado.Alterando o Estilo Padrão Se Felizmente, o InDesign é sofisticada o suficiente para atualizar as coisas para você. Se você basear em outros estilos e faça as alterações aos estilos fundamentais, que terá efeito imediato em todos os estilos relacionados. Assim, para testar uma fonte diferente através do projeto inteiro, você só precisa mudar o estilo padrão e, talvez, o padrão posições. A estrutura é como uma árvore invisível com padrão no topo.
Se você criou travessões com base no espaçamento de liderança e ajustado acima ou abaixo de um parágrafo, e mudar o estilo padrão do líder, então você terá que ajustar os outros também. Infelizmente, o InDesign não suporta unidades hereditárias ou unidades baseadas em liderança ou o tamanho da fonte (como praças em).
Quando você terminar de preparar uma variedade de projetos com fontes diferentes e terem discutido com o seu cliente (e mostrado a eles que você está Superman), agora você só tem que ajustar as margens dos documentos e grelhas de base e bloquear as linhas de estilo padrão da à grade da linha de base.
Tipo é de dois terços do Design
A maioria da informação na web está na forma de texto. É razoável sugerir que os designers de web deve ser treinado principalmente a forma de informação escrita tipografia, em outras palavras.
Já em 1969, um tipógrafo famoso suíço Emil Ruder escreveu algo sobre o seu material de impressão contemporânea que poderíamos facilmente dizer sobre o nosso site contemporânea:
Hoje somos inundados com tal avalanche imensa de material impresso que o valor do trabalho individual desvalorizou, para os nossos contemporâneos assediado simplesmente não pode ter tudo o que está impressa hoje. É tarefa do tipógrafo para dividir e organizar e interpretar essa massa de material impresso de tal maneira que o leitor tenha uma boa chance de encontrar o que é de interesse para ele.
Macrotypography (estrutura de texto em geral), ao contrário microtypography (detalhes sobre o tipo e espaçamento), lida com muitos aspectos do que hoje chamamos "design da informação." Em certos aspectos, hoje designers informações fazer o trabalho que os tipógrafos fizeram 30 anos atrás:
Tipografia tem um dever comum antes dele e que é o de transmitir informações por escrito. Nenhum argumento ou consideração pode absolver tipografia deste dever. A obra impressa que não pode ser lido se torna um produto sem efeito.
Otimizando tipografia significa aumentar a legibilidade, acessibilidade, usabilidade e equilíbrio gráfico geral. Organizando os blocos de texto e combiná-los com fotos isn't que o que os designers gráficos, especialistas em usabilidade e arquitetos de informação fazem? Então, porque é um tema tão negligenciado?
Regras de Ouro para Tipografia Efetivo
As regras básicas e dicas descritas abaixo irá ajudá-lo a usar o tipo de estrutura e em seu trabalho. Esteja ciente dessas e você vai melhorar quase tudo que você criar que contém um título ou elemento tipográfico maior.
1. Leia o texto
Alguns web designers pensam que o seu dever é simplesmente copiar e colar a partir de um arquivo de texto. Não se contente com isso, ler o texto e você vai entender como ele deve ser apresentado em um site. Evite criar uma desconexão entre o texto de um site e seu olhar.
Kick-lo a outro patamar, lendo o texto novamente uma vez que você colocou na página. Observe o espaço ao redor das letras. Existe algum espaço invulgarmente elevado que o olhar estranho? Procure as linhas que estão muito tempo para ler com facilidade, as quebras de linha inábil e problemas similares, e fazer as mudanças necessárias.
2. Confie apenas o próprio texto
Você poderia criar um site sem texto? Sites Não. dependem texto forte e palavras específicas.
A menos que seu site deve dizer "Lorem ipsum ...", texto fictício não é nenhum substituto para a coisa real, o que significa que terminar o projeto terá que esperar até chegar o próprio texto. Obtê-lo de seu cliente, como no início do processo possível, de modo que você pode sincronizar o desenho eo texto.
3. Mostrar uma hierarquia clara
Todo site precisa de uma hierarquia bem desenvolvidas que indica onde começar a ler e como proceder. Tipo pode prever que hierarquia, desde que você saiba a ordem hierárquica de antecedência. Ao planejar o tamanho do texto e fontes bem, você pode transformar texto em manchetes, sem ter que depender de colocação.
4. Atender a macro e micro-tipografia
Micro-tipografia está preocupado com legibilidade (questões de espaçamento de letras, etc), que é vital ao unir um bloco de texto, se ele não estiver legível, não há nenhum ponto no processo. Macro-tipografia aborda questões maiores de design. Ignorando qualquer faceta da tipografia será prejudicial ao seu trabalho.
5. Tenha cuidado com o tipo Cores
Todo mundo tem visitado sites em que o texto parece apenas uma sombra, fora da cor de fundo, o que invariavelmente faz com que a tensão de olho para os leitores.
Ter certeza absoluta de que o texto de seu projeto é uma cor muito diferentes do que o fundo. Preto e branco trabalhar tão bem porque estão em contraste tão drástica, mas outras combinações de cores funcionam bem, por exemplo, azul escuro em rosa claro começa o trabalho feito.
6. Levar a sério sobre CSS
Se o seu CSS é sólido, então você será capaz de mudar as páginas do seu site sem problemas. Com CSS, você pode ter o tipo consistente em todas as páginas. Butt ter cuidado: a consistência irá quebrar o destaque do texto anômalo. Isso pode ser usado a seu favor, embora, assim como o estabelecimento e, em seguida, quebrar uma grade pode fazer para um projeto eficaz. Na tipografia web, a coerência da fonte pode ser uma simples questão de CSS.
7. Plano para o seu texto
Muitos designers colocar para fora o texto em 10 pontos ou até menor, ea maioria dos usuários se sentem confortáveis com isso. Mas o seu texto e seu projeto precisa ser capaz de se adaptar para os navegadores que estão definidos para o tipo de exibição ampliada.
Browser tamanho pode variar drasticamente e mover texto para locais inesperados. Se bater o tamanho por um tamanho de ponto cria problemas, então os usuários de envelhecimento vão passar para a próxima página em uma pressa. Ter que rolar eternamente ao lado terá resultados semelhantes.
8. Tipo Use como Arte
Pare de pensar em tipografia simplesmente como manchetes e cópia do corpo, e começar a pensar nisso como um elemento de design. Tipos são meticulosamente desenhado e, portanto, cada um possui uma estética, considerá-los ativos no seu arsenal de design. Se você quiser criar um projeto de tipo-centric, incorporar tipo de atrativos como o ponto focal.
Tenha em mente que você não está confinado pela estrutura de fontes existentes. Expandir a fonte formas para atender às suas necessidades: add redemoinhos, textura, manchas, brigas ou qualquer outra coisa que você pode pensar para apimentar a aparência do tipo.
9. Favor Sans Serif
fontes sem serifa são quase sempre a melhor aposta para a web, principalmente como fontes Verdana, que foram projetados para serem exibidos em uma tela de computador. Serif fontes são mais propensos a exibir mal, tornando-se borrada ou mesmo pixelizada.
Evitando serifas totalmente não é possível, é claro, mas para grandes blocos de texto, usar uma fonte sem serifas para garantir a legibilidade.
Exemplos de tipografia em Web Design
Tipografia é fundamental para a comunicação visual, como sabemos desde folhetos, anúncios, panfletos e outros materiais de marketing. A evolução do CSS, eo uso de Sprites e tecnologias do lado do navegador de renderização de fontes, fez tipo um aspecto importante da web design.
Na internet e em qualquer outro meio, tipo deve ser atraente e fácil de ler. O texto deve ser capaz de ficar sozinho ou melhorar as imagens. O texto em negrito pode ser usado para dar ênfase.instantShift - Tipografia em Web Design
Você pode negrito algumas palavras ou frases de um parágrafo para facilitar a digitalização (como na imagem acima). olhos dos leitores irá saltar para o texto que se destaca, portanto, escolha suas palavras cuidadosamente.
Um monte de blogueiros enfatizar o texto no início e no meio de cada parágrafo ou dois. Isso não garante que cada leitor irá mergulhar profundamente no conteúdo, mas aumenta as chances de que a maioria dos que serão lidos. Não ir em uma série e fazer muito texto em negrito, pois o conteúdo vai se tornar difícil de ler e compreender.
Conteúdo de tradução do site instantshift - www.instantshift.com
