Trabalhar com Tipografia
O campo da tipografia web cresceu substancialmente ao longo do tempo. Há algumas razões diferentes para o seu aumento de popularidade, uma razão amplamente reconhecida é o desenvolvimento de um sistema para incorporar as próprias fontes da web num site.
No passado, limitavamo-nos a um pequeno número de tipos de letra que poderíamos usar num site. Esses tipos de letra eram as fontes mais comuns instaladas em computadores, portanto, eles eram mais prováveis de renderizar corretamente na tela. Se uma fonte não estava instalada num computador, ela também não seria renderizada no site. Agora, com a capacidade de incorporar fontes, temos uma paleta muito maior de tipos de letra para escolher, incluindo aqueles que adicionamos a um site.
Embora a capacidade de incorporar fontes nos dê acesso a inúmeros novos tipos de letra, também é importante para nós conhecer os princípios básicos da tipografia. Nesta lição, vamos examinar alguns desses princípios básicos e como aplicá-los às páginas web usando HTML e CSS.
Typeface vs. Font
Os termos "tipo de letra" e "fonte" geralmente são trocados, causando confusão. Aqui está o que exatamente cada termo significa.
Um tipo de letra é o que vemos. É a impressão artística de como o texto parece, sente e lê.
Uma fonte é um arquivo que contém um tipo de letra. O uso de uma fonte num computador permite que o computador aceda o tipo de letra.
Uma maneira de ajudar a esclarecer a diferença entre um tipo de letra e uma fonte é compará-los a uma música e a um MP3. Um tipo de letra é muito semelhante a uma música na medida em que é uma obra de arte. É criado por um artista ou artistas e está aberto a interpretação pública. Uma fonte, por outro lado, é muito semelhante a um MP3 na medida em que não é a própria impressão artística, mas apenas um método de entrega do valor artístico.
Adicionar cor ao texto
Normalmente, uma das primeiras decisões que tomaremos ao construir um site é escolher o tipo de letra principal e a cor do texto para serem usados. Embora existam várias outras propriedades que podem ser alteradas - tamanho, peso e por ai a diante - o tipo de letra e a cor do texto geralmente têm o maior impacto na aparência e legibilidade de uma página. Descartar os padrões do browser e usar o nosso próprio tipo de letra e cor de texto imediatamente começa a definir o tom da nossa página.
A única propriedade que precisamos para definir a cor do texto é a propriedade da cor. A propriedade da cor aceita um valor de cor, mas em muitos formatos diferentes. Esses formatos, como discutimos na Lição 3, "Conhecer o CSS", incluem palavras-chave, valores hexadecimais e valores RGB, RGBa, HSL e HSLa. Os valores hexadecimais são os mais prevalentes, pois proporcionam maior controle com o mínimo de esforço.
Vamos dar uma olhada no CSS necessário para alterar a cor de todo o texto dentro do elemento <html> numa página:
html {
color: #555;
}
Alterar as propriedades da fonte
O CSS oferece muitas propriedades diferentes para editar a aparência do texto numa página. Essas propriedades encaixam-se em duas categorias: propriedades baseadas em fontes e propriedades baseadas em texto. A maioria dessas propriedades será precedida com fonte- ou texto- . Para começar, discutiremos as propriedades baseadas em fontes.
Família de fontes
A propriedade familia de fontes é usada para declarar qual tipo de letra - bem como quais fontes alternativas devem ser usadas para exibir texto. O valor da propriedade font-family contém vários nomes de fontes, todos separados por vírgulas.
A primeira fonte declarada, a partir da esquerda, é a escolha principal da fonte. Caso a primeira fonte não esteja disponível, as fontes alternativas são declaradas depois dela em ordem de preferência da esquerda para a direita.
Os nomes das fontes que consistem em duas ou mais palavras precisam de estar entre aspas. Além disso, a última fonte deve ser um valor de palavra-chave, que usará a fonte padrão do sistema para o tipo especificado, mais comum sem serif ou serif.
A propriedade font-family em ação parece assim:
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Nesse caso, Helvetica Neue é a fonte preferida para exibir. Se esta fonte não estiver disponível ou não estiver instalada num determinado dispositivo, a próxima fonte da lista - Helvetica - será usada, e assim por diante.
Tamanho da fonte
A propriedade font-size fornece a capacidade de definir o tamanho do texto usando valores de comprimento comuns, incluindo pixels, unidades em percentagens, pontos ou palavras-chave de tamanho de fonte.
Aqui, o CSS está configurado num tamanho de fonte de 14 pixels no elemento <body>:
body {
font-size: 14px;
}
Estilo da fonte
Para alterar o texto em itálico, ou para evitar que o texto seja em itálico, usaremos a propriedade tipo fonte. A propriedade font-style aceita quatro valores de palavras-chave: normal, itálico, oblíquo e herdar. Destes quatro, os mais utilizados são o itálico (define o texto para o itálico) e o normal (retorna o texto ao seu estilo normal).
O seguinte CSS define todos os elementos com uma classe de especial para incluir um estilo de letra em itálico:
.special {
font-style: italic;
}
Variante da fonte
Isso não ocorre com frequência, mas, ocasionalmente, o texto precisará de ser configurado em maiúsculas pequenas, também conhecidas como small caps. Para este caso específico, usaremos a propriedade font-variant. A propriedade font-variant aceita três valores: normal, small-caps e herdar. Os valores mais tipicamente vistos são normais e small-caps, que são usados para alternar tipos de letra entre variantes normais e de pequenas capas.
Para alternar todos os elementos com uma classe de empresa, usaremos uma variante de fonte de small-caps:
.firm {
font-variant: small-caps;
}
Peso da fonte
Ocasionalmente, queremos exibir texto em negrito ou alterar o peso específico de um tipo de letra. Para esses casos, usaremos a propriedade font-weight. A propriedade font-weight aceita valores de palavra-chave ou numéricos.
Os valores de palavras-chave incluem normal, negrito, mais usado e mais leve. Destes valores de palavras-chave, recomenda-se usar principalmente o normal e o negrito para mudar o texto do normal para o negrito e vice-versa. Em vez de usar os valores da palavra-chave mais ou mais clara, é melhor usar um valor numérico para um controle mais específico.
Na prática, aqui está o CSS para definir o peso da fonte em negrito para qualquer elemento com a classe de ousadia:
.daring {
font-weight: bold;
}
Os valores numéricos 100, 200, 300, 400, 500, 600, 700, 800 e 900 pertencem especificamente a tipos de letra com múltiplos pesos. A ordem desses pesos começa com o peso mais fino 100, e escala até o peso mais pesado 900. Para referência, o valor da palavra-chave dos mapas normais para 400 e a palavra-chave em negrito mapas para 700, assim, qualquer valor numérico abaixo de 400 será bastante fino, e qualquer valor acima de 700 será bastante espesso.
Alterar o peso da fonte para 600 para qualquer elemento com a classe de ousada agora torna esse texto como semibold - não tão grosso quanto o valor de palavra-chave negrito de antes:
.daring {
font-weight: 600;
}
Tipos de peso
Antes de usar um valor numérico, precisamos de verificar e ver se o tipo de letra que estamos a usar vem no peso que gostaríamos de usar. A tentativa de usar um peso que não está disponível para um determinado tipo de letra fará com que esses estilos sejam padrão para o valor mais próximo.
Por exemplo, o tipo de letra Times New Roman vem em dois pesos: normal ou 400, e negrito, ou 700. A tentativa de usar um peso de 900 será o tipo de letra padrão para o peso mais próximo, 700 neste caso.
Altura da linha
Altura da linha, a distância entre duas linhas de texto (geralmente referida como líder) é declarada usando a propriedade de altura da linha. A propriedade linha-altura aceita todos os valores de comprimento geral, que cobrimos na Lição 3, "Conhecendo o CSS".
A melhor prática para a legibilidade é definir a altura da linha em torno de uma vez e meia o valor da propriedade tamanho da fonte. Isso pode ser alcançado rapidamente, ajustando a altura da linha para 150%, ou apenas 1,5. No entanto, se estamos trabalhando com uma grade de linha de base, ter um pouco mais de controlo sobre a altura da linha usando pixeis pode ser preferível.
Olhando para o CSS, estamos a definir uma altura de linha de 22 pixeis dentro do elemento, colocando assim 22 pixeis entre cada linha de texto:
body {
line-height: 22px;
}
A altura da linha também pode ser usada para centrar verticalmente uma única linha de texto dentro de um elemento. Usar o mesmo valor de propriedade para as propriedades de altura e altura da linha centrará verticalmente o texto:
.btn {
height: 22px;
line-height: 22px;
}
Esta técnica pode ser vista com botões, mensagens de alerta e outros blocos de texto de uma única linha.
Propriedades da fonte de abreviação
Todas as propriedades baseadas em fontes listadas anteriormente podem ser combinadas e rolado para uma propriedade de fonte e um valor abreviado. A propriedade da fonte pode aceitar vários valores de propriedade baseados em fontes. A ordem desses valores de propriedade deve ser a seguinte, da esquerda para a direita: tipo de letra, fonte-variante, fonte-peso, tamanho da fonte, altura da linha e fonte-família.
Como um valor abreviado, esses valores de propriedade estão listados da esquerda para a direita sem o uso de vírgulas (exceto para os nomes das fontes, pois o valor da propriedade fonte-família usa vírgulas). É necessário um separador de barra / separador / separador entre os valores da propriedade da fonte e da altura da linha.
Ao usar esse valor abreviado, cada valor de propriedade é opcional, exceto os valores da propriedade da fonte e da fonte-família. Dito isto, podemos incluir apenas os valores da propriedade font-size e font-family no valor abreviado se desejarmos.
html {
font: italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Fonte de propriedades todas juntas
Vamos ver um exemplo que usa todas essas propriedades baseadas em fontes juntas. O HTML e o CSS a seguir mostram as diferentes possibilidades no estilo do texto.
HTML
<h2><a href="#">I Am a Builder</a></h2>
<p class="byline">Posted by Shay Howe</p>
<p>Every day I see designers and developers working alongside one another. They work intelligently in pursuit of business objectives. They work diligently making exceptional products. They solve real problems and take pride in their work. They are builders. <a href="#">Continue…</a></p>
CSS
h2,
p {
color: #555;
font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
color: #0087cc;
}
a:hover {
color: #ff7b29;
}
h2 {
font-size: 22px;
font-weight: bold;
margin-bottom: 6px;
}
.byline {
color: #9799a7;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
margin-bottom: 18px;
}
Demo de Propriedades de Fontes
CSS Pseudo-Classes
A demonstração aqui usa a seguinte: pseudo-classe CSS do rato, algo que nunca vimos antes. Para referência, pseudo-classes são palavras-chave que podem ser adicionadas ao final de um seletor para modelar um elemento quando está em um estado exclusivo.
O: pseudo-classe estilos um elemento quando um utilizador paira sobre esse elemento. Quando usado com o elemento <a>, como mostrado aqui, todos os elementos <a> receberam estilos exclusivos quando estiverem pendurados. Agora os elementos <a> mudaram de cor ao passarem.
Na prática
Voltando ao nosso site da Conferência Styles, vamos começar a adicionar algumas propriedades baseadas em fontes.
- Começaremos por atualizar a fonte de todo o texto. Para fazer isso, aplicaremos estilos ao elemento
<body>. Começaremos com uma cor, e também adicionaremos os valores defont-weight,font-size,line-heightefont-familypor meio da propriedade da fonte e dos valores abreviados.
Na tentativa de manter o arquivo main.css tão organizado quanto possível, vamos criar uma nova secção para esses estilos personalizados, colocando-o logo abaixo da redefinição e acima dos nossos estilos de grade.
Precisamos de adicionar o seguinte:
/*
========================================
Custom styles
========================================
*/
body {
color: #888;
font: 300 16px/22px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
- Na Lição 4, "Abrir o Modelo da Caixa", começamos a adicionar alguns estilos tipográficos, especificamente adicionando uma margem inferior a alguns níveis diferentes de títulos e parágrafos. Dentro da mesma secção do arquivo main.css, vamos adicionar uma cor ao nivel-um através do nível quatro cabeçalhos.
h1, h2, h3, h4 {
color: #648880;
}
Enquanto estivermos nisso, adicione também os tamanhos de fonte para esses diferentes níveis de cabeçalho. Os elementos <h1> e <h2> usaram valores de tamanho de letra bastante grandes. Consequentemente, também queremos aumentar os valores de altura da linha para manter o texto dentro desses elementos legível. Para referência, faremos os valores de altura de linha de 44 pixels, dobre o valor da linha de base ajustada dentro do conjunto de regras de elemento <body>.
h1 {
font-size: 36px;
line-height: 44px;
}
h2 {
font-size: 24px;
line-height: 44px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 18px;
}
- Os elementos
<h5>seram um pouco mais únicos do que o resto dos nossos títulos. Consequentemente, vamos mudar os estilos um pouco.
Usaremos um valor de propriedade de cor diferente e um tamanho de fonte um pouco menor para esses elementos, e vamos mudar o tamanho da fonte para 400 ou normal.
Por padrão, os browsers renderizam cabeçalhos com um tipo de letra em negrito. Os títulos, no entanto, estão atualmente configurados para uma fonte de peso de 300. A reinicialização no topo do nosso arquivo main.css alterou o peso da fonte para o normal, em seguida, o nosso peso de fonte de 300 no elemento <body>. O conjunto de regras mudou todos os títulos para um tipo de letra de 300.
O peso da fonte de 400 no elemento <h5> realmente o tornará um pouco mais espesso do que o resto de nossos outros títulos e textos.
h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
}
- A reinicialização no início da nossa folha de estilos também redefine os estilos padrão do browser para os elementos
<strong>,<cite>e<em>, que iremos querer adicionar novamente. Para os nossos<strong>elementos, iremos querer definir um peso de fonte de 400, que na verdade equivale a normal, não negrito, pois o tipo de letra que estamos a usar é mais grosso do que a maioria dos tipos de letra. Então, para os nossos elementos<cite>e<em>, queremos configurar um estilo de letra em itálico.
strong {
font-weight: 400;
}
cite, em {
font-style: italic;
}
- Estamos num rolo, então vamos continuar a adicionar alguns estilos aos nossos elementos âncora. Atualmente, eles são o padrão azul do browser. Vamos fazê-los da mesma cor dos nossos elementos de título
<h1>a<h4>. Além disso, vamos usar: pseudo-classe para mudar a cor para um cinza claro quando um utilizador pairar sobre uma âncora.
/*
========================================
Links
========================================
*/
a:hover {
color: #a9b2b9;
}
a {
color: #648880;
}
- Agora vamos ver o elemento
<header>e atualizar os estilos lá. Começaremos a atualizar o logotipo adicionando as propriedades de tamanho de letra e altura de linha dentro do conjunto de regras do logotipo. Adicionando as propriedades de limite superior, flutuador e preenchimento existentes, o novo conjunto de regras deve ser assim:
.logo {
border-top: 4px solid #648880;
float: left;
font-size: 48px;
line-height: 44px;
padding: 40px 0 22px 0;
}
- Porque nós conseguimos um pouco o tamanho do logotipo, vamos adicionar uma margem para o elemento
<h3>no elemento<header>para equilibrá-lo. Faremos isso colocando um valor de atributo de classe do tagline no elemento<h3>e, em seguida, usando essa classe dentro do CSS para aplicar as margens adequadas.
Não esqueçamos que as mudanças no elemento <h3> precisam de acontecer em todas as páginas.
HTML
<h3 class="tagline">August 24–26th — Chicago, IL</h3>
CSS
.tagline {
margin: 66px 0 22px 0;
}
- Depois que o elemento
<h3>com o valor do atributo de classe do tagline vem o elemento<nav>. Vamos adicionar um valor de atributo de classe de primary-nav ao elemento<nav>e adicionar propriedades de tamanho de fonte e de fonte para que a navegação se destaque em relação ao resto do cabeçalho.
HTML
<nav class="primary-nav">
...
</nav>
CSS
.primary-nav {
font-size: 14px;
font-weight: 400;
}
- Com o elemento
<header>numa forma ligeiramente melhor, vamos ver o elemento<footer>. Usando a classe de rodapé primário, vamos alterar a cor e o tamanho da fonte para todo o texto dentro do elemento<footer>. Além disso, vamos aumentar o peso da fonte do elemento<small>para 400.
Incluindo os estilos existentes, os estilos para a seção principal do rodapé devem ser assim:
.primary-footer {
color: #648880;
font-size: 14px;
padding-bottom: 44px;
padding-top: 44px;
}
.primary-footer small {
float: left;
font-weight: 400;
}
- Vamos também atualizar a página inicial. Começaremos com a secção de heróis, aumentando a altura-linha total da secção para 44 pixeis. Também tornaremos o texto dentro desta seção maior, aumentando o tamanho da fonte do elemento
<h2>para 36 pixeis e o tamanho da fonte do elemento<p>para 24 pixeis.
Podemos fazer todas essas mudanças usando o seletor de classe de heróis existente e criando novos seletores para os elementos <h2> e <p>. Os estilos para a secção de herói agora serão quebrados dessa maneira:
.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
}
.hero h2 {
font-size: 36px;
}
.hero p {
font-size: 24px;
}
- Por último, temos uma pequena questão a consertar na página inicial. Anteriormente, damos a todos os nossos elementos de âncora um valor de cor cinza claro quando um utilizador paira sobre eles. Isso funciona de forma excelente, exceto nos três provadores na página inicial, onde o elemento âncora envolve os elementos
<h3>e<h5>. Como os elementos<h3>e<h5>têm sua própria definição de cor, eles não são afetados pelo: hover pseudo-class styles from before.
Felizmente, podemos corrigir isso, embora seja necessário um seletor bastante complicado. Começaremos adicionando um valor de atributo de classe de teaser a todas as três colunas na página inicial. Usaremos esta classe como seletor qualificado em breve.
<section class="grid">
<!-- Speakers -->
<section class="teaser col-1-3">
`<a href="speakers.html">`
`<h5>Speakers</h5>`
`<h3>World-Class Speakers</h3>`
`</a>`
`<p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>`
</section>
...
</section>
Com uma classe de qualificação no local, estamos prontos para fazer algum levantamento pesado de CSS e criar um seletor bastante complexo. Começaremos o seletor com a classe teaser, pois queremos apenas segmentar elementos dentro de um elemento com a classe de provocador. A partir daí, queremos aplicar estilos a elementos que residem dentro de elementos de âncora que estão a ser planeados. Assim, adicionaremos um seletor de tipo junto com: pseudo-classe. Por fim, adicionaremos o seletor de tipo h3 para selecionar os elementos atuais <h3> aos quais desejamos aplicar estilos.
No total, o nosso seletor e estilos para esses elementos <h3> serão assim:
.teaser a:hover h3 {
color: #a9b2b9;
}
A boa notícia é que a página inicial da Conferência Styles está a começar a parecer muito bem e está a mostrar um pouco de personalidade.
Aplicar Propriedades de Texto
Saber como definir a família, tamanho, estilo, variante, peso e altura da linha de uma fonte é apenas metade do trabalho. Além disso, podemos decidir como alinhar, decorar, recuar, transformar e texto espacial. Vamos começar com o alinhamento do texto.
Alinhamento de texto
Alinhar texto é uma parte importante da construção de um ritmo e fluxo numa página, fazemos isso usando a propriedade text-align. A propriedade text-align tem cinco valores: esquerda, direita, centro, justificar e herdar. Todos esses valores são bastante diretos, como esperado, alinham o texto à esquerda, à direita ou ao centro, ou justificam o texto.
O seguinte CSS define todo o texto do parágrafo como alinhado ao centro:
p {
text-align: center;
}
A propriedade de alinhamento de texto, no entanto, não deve ser confundida com a propriedade flutuante. Os valores de alinhamento de texto esquerdo e direito alinharam o texto dentro de um elemento para a esquerda ou para a direita, enquanto os valores do flutuador para a esquerda e para a direita moveram o elemento inteiro. Às vezes, a propriedade de alinhamento de texto dará o resultado desejado, e outras vezes, talvez possamos usar a propriedade flutuante.
Decoração de texto
A propriedade de decoração de texto fornece um punhado de maneiras de acelerar o texto. Aceita os valores de palavras-chave de nenhum, sublinhado, overline, line-through e herdar. O uso da propriedade de decoração de texto varia, mas o uso mais popular é sublinhar links, que é um estilo de browser padrão.
Aqui, o CSS projeta qualquer elemento com a classe de nota com um texto de decoração de sublinhado:
.note {
text-decoration: underline;
}
Múltiplos valores de decoração de texto podem ser aplicados a um elemento ao mesmo tempo, separando espaço - cada palavra-chave dentro do valor.
Recuo de texto
A propriedade de recuo de texto pode ser utilizada para recuar a primeira linha de texto dentro de um elemento, como é comum em publicações impressas. Todos os valores de comprimento comuns estão disponíveis para esta propriedade, incluindo pixeis, pontos, percentagens e assim por diante. Valores positivos irão recuar o texto para dentro, enquanto valores negativos irão recuar o texto para fora.
Aqui, o CSS recua o texto para todos os elementos
para dentro por 20 pixels:
p {
text-indent: 20px;
}
Sombras no texto
A propriedade text-shadow permite-nos adicionar uma sombra ou múltiplas sombras ao texto. A propriedade geralmente tem quatro valores, todos listados um do outro da esquerda para a direita. Os três primeiros valores são comprimentos e o último valor é uma cor.
Dentro dos três valores de comprimento, o primeiro valor determina o deslocamento horizontal da sombra, o segundo valor determina o deslocamento vertical da sombra e o terceiro valor determina o raio de borrão da sombra. O quarto e último valor é a cor da sombra, que pode ser qualquer um dos valores de cor utilizados dentro da propriedade de cor.
A propriedade text-shadow aqui está a lançar uma sombra preta opaca de 30% 3 pixels para a direita, 6 pixels para baixo e 2 pixels desfocados de todo o texto do elemento <p>:
p {
text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
}
O uso de valores de comprimento negativo para os deslocamentos horizontais e verticais permite-nos mover sombras para a esquerda e a parte superior.
Múltiplas sombras de texto também podem ser encadeadas usando valores separados por vírgulas, adicionando mais de uma sombra ao texto. O uso de numerosas sombras permite-nos colocá-los acima e abaixo do texto, ou em qualquer variação que desejamos.
Sombra da caixa
A propriedade text-shadow coloca uma sombra especificamente no texto de um elemento. Se quisermos colocar uma sombra no elemento como um todo, podemos usar a propriedade box-shadow.
A propriedade box-shadow funciona exatamente como a propriedade text-shadow, aceitando valores para deslocamentos horizontais e verticais, um borrão e uma cor.
A propriedade box-shadow também aceita um valor opcional de quarto comprimento, antes do valor da cor, para a propagação de uma sombra. Como um valor de comprimento positivo, a propagação expandirá a sombra maior do que o tamanho do elemento ao qual ela é aplicada e, como um valor de comprimento negativo, a propagação encolherá a sombra para ser menor que o tamanho do elemento ao qual ela é aplicada.
Por fim, a propriedade box-shadow pode incluir um valor de inserção opcional no início do valor para colocar a sombra dentro de um elemento ao contrário de fora do elemento.
Transformação de texto
Semelhante à propriedade font-variant, existe a propriedade text-transform. Enquanto a propriedade font-variant procura uma variante alternativa de um tipo de letra, a propriedade text-transform alterará o texto inline sem a necessidade de um tipo de letra alternativo. A propriedade text-transform aceita cinco valores: nenhum, capitalizar, maiúsculas, minúsculas e herdar.
O valor de maiúsculas a primeira letra de cada palavra, o valor de maiúsculas capitalizará cada letra e o valor em minúscula fará com que cada letra seja minúscula. O uso de nenhum retornará qualquer um desses valores herdados ao estilo de texto original.
O seguinte CSS define todo o texto do elemento
para aparecer em todas as letras maiúsculas:
p {
text-transform: uppercase;
}
Espaço das letras
Usando a propriedade de espaço de letras, podemos ajustar o espaço entre as letras numa página. Um valor de comprimento positivo irá empurrar letras mais distantes uns dos outros, enquanto um valor de comprimento negativo irá puxar as letras mais próximas. O valor da palavra-chave none retornará o espaço entre as letras de volta ao seu tamanho normal.
O uso de um valor de comprimento relativo com a propriedade de espaçamento de letras ajudará a garantir que possamos manter o espaçamento correto entre as letras à medida que o tamanho da fonte do texto é alterado. No entanto, é sempre uma boa ideia verificar novamente o nosso trabalho.
Com o CSS aqui, todas as letras dentro dos nossos <p> elementos aparecerão .5 em mais próximas:
p {
letter-spacing: -.5em;
}
Espaço de palavras
Assim como a propriedade de espaço de letras, também podemos ajustar o espaço entre palavras dentro de um elemento usando a propriedade de espaço de palavras. A propriedade de espaço de palavras aceita os mesmos valores de comprimento e palavras-chave como a propriedade de espaço entre letras. Em vez de separar as letras, a propriedade de espaço de palavras aplica esses valores entre palavras.
Aqui, cada palavra dentro de um elemento <p> será espaçada .25 em.
p {
word-spacing: .25em;
}
Propriedades de texto todos juntos
Vamos rever a demonstração do blog de antes, desta vez adicionando algumas propriedades baseadas em texto em cima das propriedades baseadas em fontes.
HTML
<h2><a href="#">I Am a Builder</a></h2>
<p class="byline">Posted by Shay Howe</p>
<p class="intro">Every day I see designers and developers working alongside one another. They work intelligently in pursuit of business objectives. They work diligently making exceptional products. They solve real problems and take pride in their work. They are builders. <a href="#">Continue…</a></p>
CSS
h2,
p {
color: #555;
font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
color: #0087cc;
}
a:hover {
color: #ff7b29;
}
h2 {
font-size: 22px;
font-weight: bold;
letter-spacing: -.02em;
margin-bottom: 6px;
}
h2 a {
text-decoration: none;
text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
}
.byline {
color: #9799a7;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
margin-bottom: 18px;
}
.intro {
text-indent: 15px;
}
.intro a {
font-size: 11px;
font-weight: bold;
text-decoration: underline;
text-transform: uppercase;
}
Demonstração de propriedades de texto
Na prática
Com propriedades baseadas em texto, vamos voltar para o site da Conferência Estilos e colocá-los no trabalho.
- Atualmente, cada link na página está sublinhado, que é o estilo padrão para elementos de âncora. Esse estilo é um pouco excessivo às vezes, porém, então vamos mudar isso um pouco.
Adicionando a sexção de links no arquivo main.css, começaremos por remover o sublinhado de todos os elementos âncora por meio da propriedade de decoração de texto. Em seguida, selecionaremos todos os elementos de âncora que aparecem dentro de um elemento de parágrafo e dar-lhes uma borda inferior.
Poderíamos usar a propriedade de decoração de texto em vez da propriedade de borda para sublinhar todos os links dentro de cada parágrafo. No entanto, usando a propriedade de borda inferior, temos mais controlo sobre a aparência do sublinhado. Aqui, por exemplo, o sublinhado será uma cor diferente do próprio texto.
A secção de links, que inclui os estilos anteriores, deve ser assim:
a {
color: #648880;
text-decoration: none;
}
a:hover {
color: #a9b2b9;
}
p a {
border-bottom: 1px solid #dfe2e5;
}
- Voltando aos
<h5>elementos de antes, que têm estilos ligeiramente diferentes do que o resto dos cabeçalhos, vamos torná-los todos maiúsculos usando a propriedadetext-transform. Os novos estilos de elemento<h5>devem ser assim:
h5 {
color: #a9b2b9;
font-size: 14px;
font-weight: 400;
text-transform: uppercase;
}
- Vamos rever o elemento
<header>para aplicar estilos adicionais ao menu de navegação (ao qual anteriormente adicionamos o valor do atributo da classe nav-primary). Após as propriedades existentes do tamanho da fonte e da fonte, vamos adicionar um ligeiro espaço entre letras e mudar o texto para todas as maiúsculas através da propriedadetext-transform.
Os estilos para o elemento <nav> com o valor do atributo da classe prim-nav devem ser assim:
.primary-nav {
font-size: 14px;
font-weight: 400;
letter-spacing: .5px;
text-transform: uppercase;
}
- Anteriormente, flutuamos o logotipo para a esquerda dentro do elemento
<header>. Agora, o tagline fica diretamente à direita do logotipo. No entanto, gostaríamos que aparecesse todo o caminho à direita do elemento<header>, basta direita.
Precisamos adicionar a propriedade text-align com um valor de direito ao elemento <h3> com o valor de atributo de classe do slogan para que o slogan se assista todo o caminho para a direita.
Quando adicionado à propriedade de margem existente, os novos estilos para o elemento <h3> com o valor do atributo de classe do tagline serão assim:
.tagline {
margin: 66px 0 22px 0;
text-align: right;
}
- Também gostaríamos que os menus de navegação, tanto nos elementos
<header>quanto<footer>, se sentassem à direita. Como os elementos<header>e<footer>possuem elementos filho que flutuam para a esquerda, podemos usar a mesma abordagem que fizemos com o tagline.
Os elementos flutuados nos elementos <header> e <footer> são retirados do fluxo normal da página, e isso faz com que outros elementos se envolvam em torno deles. Neste caso específico, os menus de navegação são os elementos envolvendo os elementos flutuados.
Porque estaremos a compartilhar os mesmos estilos em ambos os menus de navegação, vamos dar cada classe de nav, o elemento <header> agora parecesse com isto:
<header class="container group">
<h1 class="logo">...</h1>
<h3 class="tagline">...</h3>
<nav class="nav primary-nav">
`...`
</nav>
</header>
E o elemento <footer> agora parecesse com isto:
<footer class="primary-footer container group">
<small>...</small>
<nav class="nav">
...
</nav>
</footer>
Não esqueçamos, as mudanças nos os elementos <header> e <footer> precisam de ser feitas em todas as páginas.
- Com a classe Nav no lugar em ambos os menus de navegação, vamos criar uma nova secção dentro do arquivo main.css para adicionar estilos de navegação compartilhados. Começaremos por adicionar a propriedade text-align com um valor de direito a um conjunto de regras da classe nav. Vamos expandir esses estilos mais tarde, mas isso servirá como uma base excelente.
/*
========================================
Navigation
========================================
*/
.nav {
text-align: right;
}
- Enquanto estamos a adicionar a propriedade
text-alignpara alguns elementos diferentes, também vamos adicionar a propriedadetext-aligncom um valor de center ao conjunto de regras do seletor de classe Hero. Para referência, esses estilos, incluindo as propriedades existentes de altura de linha e preenchimento, estão localizados na secção da página inicial do nosso arquivo main.css.
.hero {
line-height: 44px;
padding: 22px 80px 66px 80px;
text-align: center;
}
A nossa Conferência de estilos agora tem algum estilo sério. No entanto, todos os estilos estão a chegar bastante bem, e o site está a progredir.
Usar Fontes Web-Safe
Por padrão, existem algumas fontes que estão pré-instaladas em todos os computadores, tablets, smartphones ou outros dispositivos compatíveis com navegação web. Como eles foram instalados em todos os dispositivos, podemos usar essas fontes livremente em sites, sabendo que não importa qual dispositivo esteja a navegar no site, a fonte irá renderizar corretamente. Esses tipos de letra tornaram-se conhecidos como "fontes web-safe". Há apenas um punhado deles, e as fontes mais seguras da internet são listadas aqui:
- Arial
- Garamond
- Lucida Sans, Lucida Grande, Lucida
- Tahoma
- Trebuchet
- Courier New, Courier
- Georgia
- Palatino Linotype
- Times New Roman, Times
- Verdana
Incorporar fontes da Web
Também temos a capacidade de carregar fontes num servidor e incluí-las num site via CSS @ font-face at-rule. Essa capacidade fez maravilhas para a tipografia on-line. Agora, mais do que nunca, a tipografia está a ganhar vida on-line.
Incorporar as próprias fontes da web parece um pouco como o seguinte CSS. Primeiro, usamos o @ font-face at-rule para identificar o nome da fonte, através da propriedade font-family, bem como a fonte (o caminho para o arquivo de fonte que contém a fonte escolhida), através da propriedade src . A partir daí, podemos usar essa fonte incluindo o seu nome dentro de qualquer valor de propriedade de fonte-família.
@font-face {
font-family: "Lobster";
src: local("Lobster"), url("lobster.woff") format("woff");
}
body {
font-family: "Lobster", "Comic Sans", cursive;
}
Demonstração de propriedades de texto
Ter a capacidade de incorporar qualquer tipo de letra num site não significa que legalmente temos autoridade para fazê-lo. Os tipos de letra são obras de arte, e publicá-las no servidor pode permitir que outras pessoas as roubem facilmente. A autoridade para usar um tipo de letra depende do licenciamento que garantimos.
Felizmente, o valor do uso de novos tipos de letra em linha foi reconhecido e as empresas começaram a desenvolver formas de licenciar e incluir novas fontes em sites. Algumas dessas empresas, como Typekit e Fontdeck, trabalham com um modelo de assinatura para licenciamento de fontes, enquanto outros, como fontes do Google, licenciam as fontes gratuitamente. Antes de fazer o upload de todas as fontes, vamos ter certeza de que temos permissão para fazê-lo.
Na prática
Para adicionar um pequeno carater ao site da Conferência Styles, vamos tentar usar um Google Font em no nosso site.
- Voltemos ao site Google Fonts e procuremos a fonte que gostaríamos de usar: Lato. Depois de encontrarmos, vamos continuar a adicioná-lo à nossa coleção e seguir as etapas no seu site para usar a fonte.
Quando chegar a hora de escolher os pesos de fonte que gostaríamos de usar, vamos nos certificar de selecionar 300 e 400, já que usamos aqueles dentro do nosso CSS. Vamos também adicionar 100 à coleção para outra variação.
O Google vai nos dar um elemento <link> adicional para incluir no elemento <head> de todas as nossas páginas. Vamos colocar este novo elemento <link> diretamente abaixo do nosso elemento <link> existente. O novo elemento incluirá a referência de folha de estilo apropriada para o Google, que cuidará de incluir um novo arquivo CSS com a própria regra de letra @ font-face necessária para usar a fonte Lato.
Com a adição do novo elemento <link>, o elemento <head> ficará assim:
<head>
<meta charset="utf-8">
<title>Styles Conference</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=Lato:100,300,400">
</head>
- Uma vez que adicionamos o novo elemento
<link>a todas as páginas, estamos prontos para começar a usar a fonte Lato. Vamos fazê-lo adicionando-o à nossa pilha de fontes primárias dentro da propriedade da fonte, dentro dos nossos estilos de elemento<body>.
Vamos adicionar Lato ao início da nossa pilha de fontes para torná-lo "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif.
Embora o Lato seja uma única palavra, porque é uma fonte da Web incorporada, queremos cercá-la com aspas em qualquer referência CSS. Os novos estilos de elementos <body> serão assim:
body {
color: #888;
font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
- O Lato agora deve estar a funcionar, visível em todo o nosso texto e em todo o site da Conferência Styles. Vamos ver o nosso logotipo e atualizá-lo um pouco.
Dentro do nosso conjunto de regras de seleção de classe de logotipo, começaremos por adicionar a propriedade font-weight com um valor de 100 para tornar o texto bastante fino. Também usamos a propriedade text-transform com um valor de maiúsculas para fazer todas as letras maiúsculas, bem como a propriedade de espaço de letras com um valor de .5 pixeis para adicionar um pequeno espaço entre cada letra dentro do logotipo.
No total, os estilos para o logotipo ficarão assim:
.logo {
border-top: 4px solid #648880;
float: left;
font-size: 48px;
font-weight: 100;
letter-spacing: .5px;
line-height: 44px;
padding: 40px 0 22px 0;
text-transform: uppercase;
}
- Como temos um valor de propriedade de fonte de 100 disponíveis, também vamos definir o elemento de parágrafo dentro da secção do herói para esse peso. Podemos usar o seletor existente para fazer isso, e o novo conjunto de regras será assim:
.hero p {
font-size: 24px;
font-weight: 100;
}
O nosso site da Conferência Styles deu alguns passos importantes nesta lição, e a aparência do site está começar realmente a brilhar.
Incluindo Citações e Cotações
Escrever online às vezes envolve citar diferentes fontes ou citações. Todos os diferentes casos de citação e cotação podem ser cobertos semanticamente em HTML usando os elementos <cite>, <q> e <blockquote>.
Saber quando usar qual elemento e atributo para marcar corretamente citações e citações leva um pouco de prática. Em geral, siga estas regras:
<cite>: usado para fazer referência a um trabalho criativo, autor ou recurso;<q>: usado para cotações curtas e inline;<blockquote>: usado para cotações externas mais longas.
Citar um trabalho criativo
O elemento <cite> inline é usado em HTML para citar especificamente um trabalho criativo, o elemento deve incluir o título do trabalho, o nome do autor ou uma referência de URL para o trabalho. Por padrão, o conteúdo enrolado dentro do elemento <cite> aparecerá em itálico dentro do browser.
Para uma referência adicional, ajuda a incluir um hiperlink para a fonte original da citação quando relevante.
Aqui, o livro Steve Jobs, de Walter Isaacson, é referenciado no elemento <cite>. Dentro da citação também é um hiperlink para o livro.
<p>The book <cite><a href="http://www.amazon.com/Steve-Jobs-Walter-Isaacson/dp/1451648537">Steve Jobs</a></cite> is truly inspirational.</p>
Citar uma demonstração de trabalho criativo
Citação de diálogo e prosa
Muitas vezes, o diálogo ou a prosa é citado inline, dentro de outro texto. Para isso, o elemento <q> em linha deve ser aplicado. O elemento <q> indica semanticamente o diálogo citado ou a prosa e não deve ser usado para outros fins.
Por padrão, o browser irá inserir as aspas apropriadas para nós e alterará aspas com base no idioma identificado no atributo global Lang.
Aqui está um exemplo:
<p>Steve Jobs once said, <q>One home run is much better than two doubles.</q></p>
Diálogo e citação de prosa
Um atributo opcional para incluir no elemento <q> é o atributo cite. O atributo cite age como uma referência de citação à citação sob a forma de um URL. Este atributo não altera a aparência do elemento, simplesmente adiciona valor para os leitores de ecrã e outros dispositivos. Como o atributo não é visível no browser, também é útil fornecer um hiperlink para esta fonte ao lado da cotação real.
Aqui está um exemplo:
<p><a href="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">Steve Jobs</a> once said, <q cite="http://www.businessweek.com/magazine/content/06_06/b3970001.htm">One home run is much better than two doubles.</q></p>
Diálogo e Prosa citando Demo
Cotação Externa
Para citar um grande bloco de texto que vem de uma fonte externa e abrange várias linhas, usaremos o elemento <blockquote>. O <blockquote> é um elemento de nível do bloco que pode ter outros elementos de nível do bloco juntos dentro dele, incluindo títulos e parágrafos.
Aqui está um exemplo que usa o elemento <blockquote>:
<blockquote>
<p>“In most people’s vocabularies, design is a veneer. It’s interior decorating. It’s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.”</p>
</blockquote>
Citação Externa
As cotações mais longas usadas no elemento <blockquote> geralmente incluiram uma citação. Esta citação pode incluir o atributo cite e o elemento <cite>.
O atributo cite pode ser incluído no elemento <blockquote>, da mesma forma que foi usado no elemento <q> anterior para fornecer uma referência de citação à citação na forma de um URL. O elemento <cite> então pode cair após a citação real própria para especificar a origem original da citação.
O HTML aqui descreve uma extensa citação de Steve Jobs que originalmente apareceu na revista Fortune. A cotação é marcada usando o elemento <blockquote> com um atributo citar para especificar onde a citação apareceu originalmente. No elemento <blockquote>, o elemento <cite>, juntamente com um elemento <a>, fornece uma citação e uma referência adicionais para a citação que é visível para os utilizadores.
<blockquote cite="http://money.cnn.com/magazines/fortune/fortune_archive/2000/01/24/272277/index.htm">
<p>“In most people’s vocabularies, design is a veneer. It’s interior decorating. It’s the fabric of the curtains, of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product.”</p>
<p><cite>— Steve Jobs in <a href="http://money.cnn.com/ magazines/fortune/fortune_archive/2000/01/24/272277/index.htm"> Fortune Magazine</a></cite></p>
</blockquote>
Demonstração de citação externa
Sumário
Aprender o estilo de texto é emocionante, pois o conteúdo pode começar a transmitir alguma emoção. Também podemos começar a brincar com a hierarquia do nosso conteúdo, tornando o nosso site mais legível e digerível.
Para recapitular rapidamente, nesta lição discutimos o seguinte:
- Adicionar cores ao nosso texto para aprimorá-lo;
- Aplicar propriedades baseadas em fontes, incluindo fonte-família, tamanho da fonte, tipo de letra, tamanho da fonte;
- Aplicar propriedades baseadas em texto, incluindo texto-alinhamento, decoração de texto, recuo de texto, sombra de texto;
- A história por trás das fontes web-safe e como incorporar as próprias fontes web;
- Como marcar corretamente citações e citações.
Afiar o texto e mexer um pouco com a tipografia trouxe bastante design. Em seguida, vamos trazer um pouco mais de cor para o nosso site, passando por fundos e gradientes.