Tipografia na web - parte 2 - Design BlogDesign Blog
Tipografia na web – parte 2
Por Marcio B D A
29 de abril de 2010 | Web Design | 14 comentários
Depois de falar um pouco neste artigo sobre os melhores métodos para usar as fontes que você quer na internet, agora quero dar algumas dicas para deixar seu site mais agradável de se ler. Tipografia é um assunto complexo, tem tantos detalhes que eu poderia ficar um mês aqui escrevendo e mesmo assim não cobriria todos os aspectos.
Então, vou compartilhar algumas coisas que eu tenho usado ultimamente em alguns trabalhos.
Antes de começar a falar como escolher as fontes para seu site eu gostaria de compartilhar uma experiência pessoal. Eu gosto tanto de tipografia por um simples motivo. Eu já fiz coisas horríveis no passado. Na época em que o auge do webdesign eram os frames eu tentava fazer alguns sites com uma cara mais profissional e achava que só testando fontes no dreamweaver era o suficiente. E mais… algumas vezes eu ia apenas adicionando fontes novas como se não houvesse amanhã.
Bem, não preciso explicar por que o resultado era sempre um lixo. Muita gente consegue trabalhar apenas "sentindo" que fonte colocar. Bem… eu não. Para fazer um bom uso de tipografia eu prefiro ser mais "racional". Ter um bom motivo pra cada família que eu escolho já é um bom começo. E se conseguir extender o conceito do site à tipografia você já fez a maior parte do trabalho.
Além disso, a não ser que você tenha um ótimo motivo, use no máximo duas famílias diferentes no seu projeto. Eu já percebi na prática porque um site com várias fontes diferentes é uma das coisas mais feias da internet.
Eu sei que há toda uma discussão para entender se usar grid liberta ou aprisiona a criação do site, mas again… na minha experiência pessoal… usar grids só trouxe benefícios.
Primeiro porque é mais fácil de codificar. Se desde o trabalho no photoshop vc já tem as medidas, é mais prático na hora de montar o CSS. E Segundo porque é agradavel aos olhos. É uma maneira de manter o site equilibrado visualmente sem ficar experimentando muito. Me deixa com mais tempo livre para pensar nas cores, por exemplo.
The Grid System: Uma das melhores fontes de informação sobre grids na internet.
Para criação, recomendo o 960 grid system. Apenas, baixe o template do photoshop aqui e divirta-se. Um outro bom site com diversos grids é o thegridsystem.
E depois do grid, a consequencia é o pixel. Digo isso porque muita gente ainda fica horrorizada de pensar num layout web em pixels. Num passado não muito distante eram usados ems para definir tamanhos de fontes e caixas afim de que navegadores incompetentes não quebrassem o layout quando alguém desse zoom na página.
Bom, esses navegadores morreram e trabalhar com pixels é muito mais fácil agora. As medidas são exatas e você não precisa ficar pensando em proporções.
Num próximo artigo eu vou falar do que o CSS3 tem de bom e ruim para uma tipografia decente na web.
Para quem não sabe – O que é web design?HTML5 e a Web SemânticaDicas de SEO para web designersQual o impacto das redes sociais em uma empresa
Pingback: Tweets that mention Tipografia na web – parte 2 | Design.Blog.br -- Topsy.com
http://www.gemellaro.com Alexandre Gemellaro
Falou de GRID e de PIXEL, mas Tipografia mesmo… Pingback: Cesta de Chocolates da Semana #10 | Choco la Design
http://chocoladesign.com Will
Alexandre, só porque o titulo remete a tipografia não quer dizer que no post o assunto principal será esse. Até porque é uma série de posts, então tem muita coisa pra ser dita e que não caberia em um post só, o jeito é explicar parte por parte. E o post está bem bacana! :D
Abraço Marcio! http://artefatodesign mayco
Muito bom o conteúdo, na verdade são várias as etapas que temos que enfrentar para a criação de um layout.
http://homedesignhelp.com Home Design
I like to work on it. joseph
Home Design http://homedesignhelp.com Home Design
Home Design http://estiloemoff.blogspot.com Rafaela
te seguindo pra saber de tudo q rola por aki. Bjs,
Rafaela Xistosfóstenes
"Bom, esses navegadores morreram e trabalhar com pixels é muito mais fácil agora. As medidas são exatas e você não precisa ficar pensando em proporções."
Bom, é a primeira vez que vejo alguém dizer que é mais certo usar 'px' do que 'em' para as medidas das fontes. Você está certo disso? http://www.main-site.com.br Fillipe Barros
Cara, estudo programação e não sou bom em design, mas as dicas que você dá são fenomenais e têm me ajudado muito a compreender o que tenho visto na internet, ainda não me atrevo a criar nada, mas ja tem me adiantado bastante, muito obrigado. Se liga, não entendi qual a relação que vc quis dar ao pixel (inerente au tamanho da fonte imagino eu) com o Grid e com a fonte em si. Tem algum padrão que você usa? Abraços Paulo Patto
Alguém pode me informar qual o nome da fonte serifada que aparece no texto??? Nesta imagem http://design.blog.br/wp-content/uploads/2010/04/… ? Obrigado Se possível mandar para meu e-mail: paulopatto #arroba# gmail.com http://www.multiwebdigital.com.br Criação de Sites BH
Olá Paulo Patto, tenta usar o What the Font para descobrir qual é a fonte. http://www.familiahost.com Marcelo
Adorei o Post, achei interessante suas dicas e vale ressaltar todas as recomendações na hora de elaborar um site.