Project 365: Typography + Photography

Ashley Herrin have a nice set on flickr that combines Typography with Photography.

A third attempt at a 365 days project. Most of the photos were taken during a road trip during summer 2010 and have been sitting unused and unedited on my computer since I got back. 75 days on the road, 17,000 miles driven, 26+ national parks. This 365 days project is the best way for me to finally go through all these overlooked images.

Check the set page at: http://www.flickr.com/photos/ashleyherrin/sets/72157627278558354/


Jameson Irish Whiskey Typeface

I went to a coffee and have liked the typeface of the Jameson whiskey logo that was on the counter and took a photograph. 

Asked a friend, that is designer, what typeface was and he told me it would probably be a custom one for the brand. I have done some research on the Internet looking for a typeface that resembles the one of the logo and found the ITC Stone ® SERIF FONT FAMILY.


Introdução à tipografia para a Internet

alfabeto

Imagem retirada do site 72dpi.

A tipografia pode ser considerada como uma arte, que tem como principal objectivo esculpir a informação escrita, procurando melhorar a comunicação entre o escritor e o leitor. A tipografia tem, claramente, um papel fundamental na passagem da mensagem pretendida.

As fontes a utilizar

Relativamente à tipografia na Web, não tem interesse ter-se uma grande quantidade de fontes para se utilizarem na construção de um site, uma vez que o número de fontes suportadas, por defeito, nos diferentes sistemas operativos é muito reduzido, sendo posteriormente essas as fontes tipicamente disponíveis aos visitantes das páginas. Esta lista de fontes suportadas em todos os sistemas operativos é vulgarmente conhecida por the safe list. Existem formas de utilizar fontes fora desta lista. Contudo, estes métodos ainda não são suportados por alguns browsers de Internet.

É tipicamente recomendável o uso de uma font stack por forma a manter um design constante em diferentes sistemas operativos e em diferentes browsers.

Comprimento da linha

Para além do tipo de fonte, é também importante o comprimento da linha do texto. Linhas de texto curtas ou demasiado longas podem causar irritação ou um elevado grau de distracção para o leitor. Linhas demasiado curtas apenas devem ser utilizadas para textos muito pequenos, porque para textos grandes forçam o leitor a exageradas mudanças de linha o que acaba por ser um obstáculo à leitura. Relativamente a linhas excessivamente longas, estas tornam difícil a localização da próxima linha a ler, quando o leitor termina de ler a linha anterior. Para os principais conteúdos deverá ser respeitada uma medida entre 40 a 80 caracteres (incluindo espaços) para cada uma das linhas. Idealmente deve-se tentar atingir uma medida na ordem dos 65 caracteres.

Contraste

O contraste do texto é também muito importante para uma correcta leitura do seu conteúdo. Um aspecto importante a evitar é a utilização de cores complementares para as combinações entre o texto e seu respectivo fundo. Cores complementares são as cores que se situam do lado oposto uma da outra nos sistemas de cores. No sistema HSV são facilmente identificadas as cores complementares.

Tamanho da letra

O tamanho é outro aspecto a ter em conta. Existem alguns sites na Internet, inclusivamente já na era da Web 2.0, que insistentemente utilizam fontes muito pequenas em algumas porções de texto ou inclusivamente no texto todo. Se existe texto numa página, então deve-se conseguir ler facilmente o seu conteúdo, sendo que a adopção de fontes de tamanho muito pequeno em nada ajuda à leitura. Por conseguinte, sempre que possível, é aconselhável a utilização de tamanhos de fonte grandes e nunca abaixo dos 11 pixels.

Hierarquia

A hierarquia ao nível da importância de cada pedaço de texto presente numa página é um aspecto de grande influência na mensagem que se pretende passar ao visitante. Os diferentes tamanhos permitem, por um lado, evidenciar os elementos mais importantes numa página e, por outro, possibilitar a visualização de algo muito semelhante a um sumário sobre os assuntos que trata o site. Isto porque mesmo através de um simples piscar de olhos conseguem ser focados os temas e ideias principais de uma forma automaticamente estruturada pelo visitante. É aconselhável que o tamanho seja consistente ao longo de todas as páginas do site para manter alguma uniformização entre o mesmo tipo de componentes.

A localização dos conteúdos

Os visitantes reagem também de forma diferente aos textos conforme a sua localização na página. Tipicamente os textos colocados no corpo principal da página terão um impacto superior aos encontrados numa barra-lateral. Contudo, se pretendermos captar uma maior atenção do leitor para a barra-lateral, poderemos compensar, por exemplo, com um aumento do tamanho da letra nesta mesma barra-lateral. Particularmente neste aspecto da localização, é importante seguir algumas das convenções utilizadas na Internet de modo ao utilizador agir de forma instintiva ao primeiro contacto com a página.

A regra de Gutenberg dá algumas indicações importantes sobre este assunto, é possível ler alguma informação (em Inglês) sobre esta regra no site da NuvoGraphics.

Dar espaço para o texto respirar

O texto deve conseguir respirar e para isso deve ter espaço. Esse espaço permite focalizar a atenção do visitante no próprio texto que acaba por ser o mais importante para transmitir a mensagem. Uma regra seguida por muitos webdesigners é estabelecer, através do CSS, um espaçamento entre linhas de 140% o tamanho do texto.

Estes são alguns dos aspectos que penso serem importantes na âmbito da tipografia na Internet, se tiverem outros que considerem relevantes não hesitem em partilhar.


A tipografia utilizada nos logótipos da Web 2.0

logos-tipo-small

O logótipo pretende representar graficamente uma determinada marca e para isso faz uso de um desenho, de uma tipografia específica ou de uma fusão de ambos. Neste artigo são listadas as fontes utilizadas nos logótipos de algumas das empresas mais influentes na era da Web 2.0 e são também recomendadas mais 10 fontes, gratuitas, que penso serem adequadas à criação de logótipos semelhantes aos dessas empresas.

Read More


Anatomia Tipográfica

No ano de 2008 Paulo de Loyola criou um infográfico bastante útil com um glossário visual dos elementos de composição de um caractere tipográfico. Apenas numa imagem conseguiu resumir e interligar um conjunto de informações importantes sobre a anatomia tipográfica. É um recurso perfeito para consultas rápidas ou para quem não tem muito conhecimento na área e pretende aprender um pouco mais sobre o universo da tipografia.

anatomia-tipografica

Clicar aqui para ver a imagem no tamanho original. Também é possível descarregar no formato pdf.