<?xml version="1.0" encoding="iso-8859-1"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Logon.com.pt &#187; Passos Simples</title>
	<atom:link href="http://logon.com.pt/category/passos-simples/feed/" rel="self" type="application/rss+xml" />
	<link>http://logon.com.pt</link>
	<description>Notas breves</description>
	<lastBuildDate>Thu, 05 Aug 2010 09:29:35 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Cinco Passos Simples para Melhor Tipografia</title>
		<link>http://logon.com.pt/2009/03/11/cinco-passos-simples-para-melhor-tipografia/</link>
		<comments>http://logon.com.pt/2009/03/11/cinco-passos-simples-para-melhor-tipografia/#comments</comments>
		<pubDate>Wed, 11 Mar 2009 13:53:54 +0000</pubDate>
		<dc:creator>José Carlos</dc:creator>
				<category><![CDATA[Passos Simples]]></category>
		<category><![CDATA[Tipografia]]></category>
		<category><![CDATA[Webdesign]]></category>

		<guid isPermaLink="false">http://logon.com.pt/?p=264</guid>
		<description><![CDATA[<p class="notice">Este artigo é uma tradução do artigo original <a href="http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/">Five simple steps to better typography</a> com total conhecimento e permissão do autor, o designer inglês <a href="http://markboulton.co.uk">Mark Boulton</a>. Recentemente foi lançado o livro <a href="http://www.fivesimplesteps.co.uk/">A pratical guide to Designing for the Web</a> onde podem encontrar muitas das coisas que deram origem a esta série de&nbsp;posts.</p>
<p><img class="left-clear" title="fi" src="http://logon.com.pt/blog-images/fivesimplesteps/bettertypography/fi.gif" alt="fi" width="100" /> A Tipografia ainda é, na minha opinião, um mistério para muitos designers. O tipo de Tipografia de que falo não é o habitual &#8220;Que tipo de letra devo usar&#8221; mas sim &#8220;distinguir um hífen de um em-dash&#8221;. Chamem-me purista mas isto&nbsp;incomoda-me.</p>
<p>Então, numa tentativa de espalhar a palavra, aqui fica o primeiro de Cinco Passos Simples para Melhor Tipografia. Para começar vou falar da Medida.<br />
<!--more--></p>
<h3>Medir a&nbsp;Medida</h3>
<p><img class="left" src="http://logon.com.pt/blog-images/fivesimplesteps/bettertypography/measure_1.gif" alt="A Medida" width="400" /></p>
<p>Medida é o nome dado ao comprimento de uma linha de caracteres completa. Há várias unidades de medida usadas para definir a Medida. As três unidades básicas&nbsp;são:</p>
<ul>
<li>Um ponto = 1/72 de uma&nbsp;polegada</li>
<li>Uma pica = 12&nbsp;pontos</li>
<li>Um em = A distância horizontal igual ao tamanho do tipo de letra, em pontos, que está a utilizar. Ex: 1em de 12pt =&nbsp;12pt.</li>
</ul>
<p>Mas, com o advento do <acronym title="Desktop publishing">DTP</acronym>, e com o design de sites que se lhe seguiu, são usadas&nbsp;também:</p>
<ul>
<li>Milímetros</li>
<li>Pixels</li>
</ul>
<p>Há um tamanho ideal para a Medida e que é definido pela quantidade de caracteres na linha. Uma regra geralmente boa é a de 2-3 alfabetos de comprimento, ou 52-78 caracteres (espaços incluídos). Isto serve o propósito da legibilidade. Mantenha a Medida dentro destas linhas orientadoras e não deverá ter problemas de legibilidade. Note que esta recomendação poderá mudar largamente mediante pesquisas, esta é apenas uma teoria que aplico e que parece funcionar bem como regra&nbsp;geral.</p>
<h4>CSS e&nbsp;fluído?</h4>
<p>O interessante aqui são os designs fluídos para a web. Como pode a Medida reagir a um aumento, ou uma dimuição, de tamanho. Toda a grelha teria de se adaptar ao novo tamanho. Um interessante ponto de discussão e&nbsp;desafio.</p>
<h4>A Medida e o&nbsp;leading</h4>
<p>Uma regra simples é o seu leading ser mais longo que o espaçamento entre palavras. Isto porque, quando o balanço é correcto, os seus olhos deslocar-se-ão ao longo da linha em vez de para&nbsp;baixo.</p>
<p>Se a medida é maior que as regras para melhor legibilidade, então aumente o leading, ou a altura da linha, como é por vezes, erradamente, chamada. Isto terá o efeito de aumentar a legibilidade. O seu leading deverá aumentar proporcionalmente à Medida. <strong>Medida pequena, menor Leading. Medida mais larga, maior leading.</strong> É uma regra simples mas muito&nbsp;eficaz.</p>
<h4>Inverter as&nbsp;cores?</h4>
<p><img class="left" src="http://logon.com.pt/blog-images/fivesimplesteps/bettertypography/black_white.gif" alt="Reversing out" width="400" /></p>
<p>Quando inverter as cores, ex.: texto branco em fundo preto, certifique-se que aumenta o leading, o tracking e diminui o peso da letra. Isto aplica-se a todas as larguras da Medida. Texto branco em fundo preto tem um maior contraste em relação ao oposto, por isso as letras devem ficar mais separadas, mais leves em grossura e ter mais espaço entre&nbsp;linhas.</p>
<h4>Tracking</h4>
<p><img class="left" src="http://logon.com.pt/blog-images/fivesimplesteps/bettertypography/tracking.gif" alt="Tracking" width="400" /></p>
<p>Uma boa regra no que refere ao tracking das palavras (não dos caracteres) é que quanto menor for o comprimento da linha, mais apertado é o tracking, e o oposto também se&nbsp;verifica.</p>
<h4>A sua&nbsp;responsabilidade</h4>
<p>Seguindo estas simples regras garante que o corpo dos seus textos será tão legível quanto possível. Estas regras têm origem na arte da tipografia que, infelizmente para a nossa indústria em particular, não são ensinadas tanto quanto deveriam nas escolas de arte do mundo. Como resultado elas não são praticadas e a tipografia correcta e bem feita está em&nbsp;declínio.</p>
<p>É nossa responsabilidade, enquanto designers, de abraçar as regras que nasceram de um ofício que remonta vários&nbsp;séculos.</p>
<p>Espero que esta série de cinco passos, rápidos e garantidos, sirvam para melhorar a sua arte tipográfica e garantam que os computadores e o <acronym title="Desktop Publishing">DTP</acronym> não acabem com ela. Isso seria uma enorme&nbsp;perda.</p>
<h4>A série de&nbsp;artigos</h4>
<p>Este é o primeiro artigo da série &#8220;Cinco Passos Simples…&#8221; o próximo fala sobre &#8220;Hanging&nbsp;Punctuation&#8221;.</p>
<p class="notice">Este artigo é uma tradução do artigo original <a href="http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_better_typography/">Five simple steps to better typography</a> com total conhecimento e permissão do autor, o designer inglês <a href="http://markboulton.co.uk">Mark Boulton</a>. Recentemente foi lançado o livro <a href="http://www.fivesimplesteps.co.uk/">A pratical guide to Designing for the Web</a> onde podem encontrar muitas das coisas que deram origem a esta série de&nbsp;posts.</p>
]]></description>
		<wfw:commentRss>http://logon.com.pt/2009/03/11/cinco-passos-simples-para-melhor-tipografia/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic Page Served (once) in 0.219 seconds -->
