Tipografia

docs.scrimba.com

A maior parte do que as pessoas leem na web é texto, e a maioria da sensação que uma página transmite vem de como esse texto está configurado. Mude a fonte, ajuste o espaçamento entre linhas, limite o comprimento da linha, e o mesmo parágrafo passa de apertado e desagradável para calmo e legível. Nada disso é decoração. É tipografia, o punhado de propriedades CSS que decide o quão confortável suas palavras são de ler, e este capítulo é o passeio pelos que você usa diariamente.

Escolhendo uma fonte

A propriedade que escolhe sua fonte é font-family, e você não lhe passa apenas uma fonte, mas uma lista. Esta lista é a pilha de fontes: o navegador tenta a primeira fonte, e se ela não estiver disponível, volta para a próxima, e assim por diante.

body {
  font-family: "Helvetica Neue", Arial, sans-serif;  /* tenta Helvetica, depois Arial, depois qualquer sans-serif */
}

O último nome deve sempre ser uma família genérica como sans-serif ou serif. Essa é sua rede de segurança: se nenhuma das fontes nomeadas estiver no dispositivo do leitor, o navegador ainda mostra algo sensato em vez de um padrão que você não escolheu. Nomes de fonte com espaços vão entre aspas; nomes de uma só palavra não precisam delas.

font-family recebe uma pilha de fontes separada por vírgulas, e o navegador usa a primeira fonte da lista que consegue renderizar. Cada nome é um fallback para o anterior, e a lista deve terminar em uma família genérica (sans-serif, serif, monospace) para que sempre haja uma resposta final.

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

Você tem duas opções amplas para as fontes que nomeia. A pilha de fonte do sistema lista as fontes de interface padrão de cada sistema operacional, então a página pega o que o dispositivo do leitor já usa. Não custa nada baixar e parece nativo, razão pela qual muitos aplicativos a usam:

body {
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

A outra opção é uma fonte web: um arquivo de fonte que você carrega para que cada leitor veja a mesma fonte. Você vincula um de um host como Google Fonts, ou o auto-hospeda com @font-face. Isso lhe dá controle sobre a aparência ao custo do download que o leitor aguarda.

font-family resolve uma pilha de fontes da esquerda para a direita, escolhendo a primeira família que o navegador consegue renderizar, razão pela qual a lista termina em uma família genérica (sans-serif, serif, monospace) como último recurso garantido. Duas estratégias estão por trás dos nomes que você escolhe, e elas trocam diferentemente.

A pilha de fontes do sistema nomeia a fonte nativa da interface de cada plataforma, então a página herda a fonte que o sistema operacional já fornece. Nada faz download, então não há atraso de carregamento e nenhuma mudança de layout, e o texto parece nativo em cada dispositivo. O custo é que sua página fica ligeiramente diferente entre plataformas, o que é bom para interfaces tipo aplicativo e errado para uma marca que precisa de um rosto consistente.

body {
  /* a pilha de sistema moderna: San Francisco, Segoe UI, Roboto, depois fallbacks */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

Uma fonte web é um arquivo de fonte que o navegador baixa para que cada leitor veja a mesma fonte. Você a vincula de um host ou a auto-hospeda com uma regra @font-face que mapeia um nome de família para um arquivo. Auto-hospedar mantém a fonte em sua própria origem, o que evita uma solicitação de terceiros e lhe dá controle sobre o cache e o comportamento font-display que governa se o texto aparece em um fallback enquanto a fonte carrega.

@font-face {
  font-family: "Satoshi";
  src: url("/fonts/satoshi.woff2") format("woff2");
  font-weight: 400 700;         /* um arquivo variável cobrindo um intervalo de peso */
  font-display: swap;           /* mostra texto fallback imediatamente, muda quando carregado */
}

body {
  font-family: "Satoshi", system-ui, sans-serif;  /* fonte web nomeada, depois um fallback nativo */
}

A razão pela qual o fallback ainda importa com uma fonte web é que o download pode ser lento ou falhar, e font-display: swap renderiza sua família fallback enquanto isso. Escolher um fallback com métricas semelhantes à fonte web evita que a troca abale o layout.

JunoEscolhendo uma fontefont-family recebe uma lista, não uma fonte, e o navegador usa a primeira que conseguir encontrar. Sempre termine a lista com uma família genérica como sans-serif para que haja um fallback seguro. Envolva qualquer nome de fonte com espaços em aspas.

JunoEscolhendo uma fonte A pilha de fontes é uma lista de fallbacks terminando em uma família genérica, e o navegador pega a primeira fonte que consegue renderizar. A pilha de fonte do sistema pega as fontes nativas do dispositivo gratuitamente sem download, enquanto uma fonte web carrega um arquivo para que todos vejam o mesmo rosto. Escolha a pilha do sistema para trabalho tipo aplicativo e uma fonte web quando a aparência deve ser consistente.

JunoEscolhendo uma fonte As pilhas resolvem da esquerda para a direita e devem terminar em uma família genérica, então o leitor sempre vê texto. A pilha do sistema não custa nada e nunca muda layout mas varia por plataforma; uma fonte web é um rosto consistente ao custo de um download que você deve proteger com font-display: swap e um fallback bem-combinado. Auto-hospede com @font-face quando você quer controle sobre o cache e evitar a solicitação de terceiros.

Dimensionando texto

Você define o tamanho do texto com font-size. Você pode atribuir a ele um valor em pixels, mas o tamanho que você deve usar é o rem, uma unidade ligada ao tamanho de fonte base da página. Um rem é igual ao tamanho de texto padrão do navegador, que geralmente é 16px, então 1rem é um tamanho de leitura normal e 1.25rem é um pouco maior.

body {
  font-size: 1rem;             /* o tamanho de leitura base, geralmente 16px */
}
h1 {
  font-size: 2rem;             /* o dobro do tamanho base */
}

font-size define o tamanho do texto, e para o corpo do texto você deve dimensioná-lo em rem em vez de px. Um rem é o tamanho de fonte do elemento raiz, que é padrão 16px e é um valor que o leitor pode alterar nas configurações do navegador. Dimensionar em rem significa que seu texto escala com essa preferência; dimensionar em px o bloqueia.

:root {
  font-size: 100%;             /* respeita o padrão do leitor, geralmente 16px */
}
p {
  font-size: 1rem;             /* escala se o leitor mudar seu padrão */
}

Dimensione o corpo do texto em rem, não em px, para que respeite o tamanho escolhido pelo leitor. O capítulo unidades de dimensionamento entra em detalhes sobre como rem, em, percentuais e unidades de viewport se resolvem; a versão resumida para tipografia é que rem oferece texto escalável e acessível com matemática previsível.

font-size aceita muitas unidades, mas para corpo de texto a escolha se resume à acessibilidade. Um rem (root em) é relativo ao font-size do elemento raiz (<html>), cujo padrão é o que o leitor definiu no navegador, normalmente 16px mas livremente alterável. Um valor de pixel ignora essa preferência. Um leitor que aumenta seu tamanho de texto padrão por conforto ou deficiência visual vê texto em rem crescer e texto em px ficar parado, então cópia em corpo px silenciosamente substitui uma configuração de acessibilidade que o leitor deliberadamente escolheu.

:root {
  /* deixe a raiz no padrão do leitor; não defina você com 16px em px */
  font-size: 100%;
}

p {
  font-size: 1rem;             /* 1rem = o tamanho raiz do leitor, escala com ele */
}

.lead {
  font-size: 1.125rem;         /* 18px em uma raiz de 16px, ainda escala */
}

Prefira rem a em para font-size porque em é relativo ao tamanho de fonte do pai, então ems se compõem quando aninhados: um elemento com tamanho em em dentro de outro elemento com tamanho em em se multiplica, e uma lista aninhada três níveis de profundidade pode encolher ou crescer inesperadamente. rem sempre se refere ao valor raiz único, então permanece previsível não importa o quão profundo o elemento está. Note que isso é distinto do zoom da página, que escala tudo incluindo px; o caso que rem protege é o leitor aumentar o tamanho de fonte padrão especificamente, o que muitas pessoas fazem e que texto px ignora.

JunoDimensionando textofont-size define o tamanho do texto, e rem é a unidade para usar. Um rem é o tamanho de texto normal do navegador, então 1rem é regular e 2rem é o dobro. Evite dimensionar corpo de texto em px, que é o que os próximos níveis exploram.

JunoDimensionando texto Dimensione o corpo do texto em rem, não em px. Um rem é o tamanho de fonte raiz do leitor, então texto em rem escala quando ele muda seu padrão e texto em px fica travado. O capítulo de unidades de dimensionamento cobre a matemática, mas para tipo a regra é curta: rem para qualquer coisa que uma pessoa lê.

JunoDimensionando textorem rastreia o tamanho de fonte raiz que o leitor controla, então texto em corpo px silenciosamente substitui uma escolha de acessibilidade que ele fez propositalmente. Use rem em vez de em também, porque em é relativo ao pai e se compõe quando elementos são aninhados. Isso é sobre o tamanho de fonte padrão do leitor, que é uma coisa separada do zoom de página.

Peso e estilo

Duas propriedades mudam a forma das suas letras. font-weight controla o quão negrito o texto é, e font-style ativa itálicos.

strong {
  font-weight: bold;           /* traços mais pesados e espessos */
}
em {
  font-style: italic;          /* inclinado */
}

bold e normal são as palavras-chave de peso de todos os dias. Para itálicos, italic inclina o texto e normal o mantém vertical.

font-weight define o quão pesado o texto é, e enquanto normal e bold são as palavras-chave familiares, a propriedade realmente recebe pesos numéricos de 100 a 900 em passos de 100. 400 é o que normal mapeia, e 700 é o que bold mapeia. Os números importam porque muitas fontes vêm com pesos extras que as palavras-chave não conseguem alcançar.

h1 {
  font-weight: 700;            /* o mesmo que bold */
}
.caption {
  font-weight: 300;            /* um peso leve, sem palavra-chave para isso */
}

font-style: italic oferece o design verdadeiro em itálico da fonte onde existe, um rosto inclinado separadamente desenhado em vez de uma inclinação mecânica. Reserve para ênfase real ou convenções como títulos de livros, não para estilizar grandes blocos, que itálicos tornam mais difíceis de ler.

font-weight recebe pesos numéricos de 100 a 900; normal é um alias para 400 e bold para 700. O número só se resolve para uma espessura distinta se a fonte realmente contém esse peso. Peça por 600 de uma fonte que fornece apenas 400 e 700, e o navegador ou arredonda para um peso real ou sintetiza um falso negrito engrossando os traços, o que parece pior que o peso projetado. Então os pesos disponíveis dependem do que você carregou: uma fonte web vinculada a apenas dois pesos oferece dois, qualquer que seja os números que você escreva.

h1 {
  font-weight: 800;            /* só distinto se a fonte fornece um rosto 800 */
}
p {
  font-weight: 400;
}

font-style: italic seleciona o rosto itálico desenhado da fonte, que é um design separado com diferentes formas de letras em vez de uma inclinação mecânica. Onde nenhum rosto itálico existe, o navegador falsifica um pelo corte do vertical, chamado itálico sintético, e parece mais barato. Também existe oblique, uma verdadeira inclinação do design vertical, mas italic é o que você quer para prosa porque escolhe o rosto adequadamente desenhado quando a fonte tem um.

JunoPeso e estilofont-weight torna o texto mais negrito ou mais leve, e font-style: italic o inclina. As palavras-chave bold e normal cobrem a maioria do que você precisa dia a dia. Use itálicos para ênfase, não para parágrafos inteiros, que ficam difíceis de ler.

JunoPeso e estilofont-weight realmente vai de 100 a 900, com 400 como normal e 700 como bold, e os números desbloqueiam pesos que as palavras-chave não conseguem nomear. Apenas os pesos que sua fonte realmente fornece aparecerão; o resto são falsificados ou arredondados. Mantenha italic para ênfase e títulos em vez de longas extensões de texto.

JunoPeso e estilo Pesos numéricos vão de 100 a 900, mas um número só funciona se a fonte contém esse rosto; caso contrário, o navegador arredonda ou sintetiza um falso negrito que parece pior. Então uma fonte web carregada em dois pesos oferece dois, qualquer que seja o que você digite. italic escolhe o rosto itálico desenhado quando existe e volta para uma inclinação sintética quando não.

Espaçamento que torna o texto legível

Texto confortável é principalmente sobre espaço. line-height controla o espaço entre linhas, e dar a ele um pouco de espaço torna um parágrafo muito mais fácil de ler.

p {
  line-height: 1.5;            /* uma vez e meia o tamanho da fonte */
}

Use um número simples como 1.5 sem unidade. Isso significa "uma vez e meia o tamanho da fonte", então o espaçamento cresce em passo com o texto. Linhas apertadas são uma das razões mais comuns pelas quais uma página parece difícil de ler, e este valor resolve a maioria disso.

Três propriedades fazem a maior parte do trabalho do texto legível. line-height define o espaço vertical entre linhas, e você deve dar a ele um valor sem unidade como 1.5, o que significa 1,5 vezes o tamanho da fonte do elemento. letter-spacing ajusta o espaço entre caracteres, útil em pequenas doses para cabeçalhos em maiúsculas. E o comprimento de uma linha importa tanto quanto qualquer um: linhas muito longas são cansativas de ler, então você limita a linha com max-width.

p {
  line-height: 1.5;            /* sem unidade: escala com o tamanho da fonte */
  max-width: 65ch;             /* limita a medida em torno de 65 caracteres */
}
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.05em;      /* pequeno rastreamento para que maiúsculas não se amontoem */
}

Essa unidade ch é a largura do caractere "0", então 65ch tem aproximadamente 65 caracteres de largura. A medida confortável, o número de caracteres por linha, fica em torno de 45 a 75, e limitá-la é um dos movimentos de tipografia com maior impacto que você pode fazer.

Legibilidade se resume a três controles: altura de linha, espaçamento de letras e comprimento de linha. line-height deve ser sem unidade (1.5, não 24px), e a razão é herança. Uma altura de linha sem unidade é herdada como o fator, então cada descendente a multiplica pelo seu próprio tamanho de fonte e cada elemento obtém espaçamento proporcional. Uma altura de linha com unidade é herdada como o comprimento computado, então uma filha com um tamanho de fonte maior herda a caixa de linha fixa do pai e suas linhas se sobrepõem.

body {
  line-height: 1.5;            /* herdado como fator: cada elemento escala */
}

h1 {
  font-size: 2.5rem;
  /* herda 1.5, computa para 1.5 x 2.5rem; uma altura de linha fixa de 24px cortaria aqui */
}

.article {
  max-width: 65ch;             /* medida de ~65 caracteres */
  text-wrap: balance;          /* opcional: equilibra linhas irregulares em cabeçalhos */
}

letter-spacing (rastreamento) é melhor deixado no padrão da fonte para corpo de texto, onde o designer já o ajustou; pequenos valores positivos ajudam trechos em maiúsculas e small-caps que amontoariam, e valores negativos muito pequenos podem apertar cabeçalhos grandes de exibição. Comprimento de linha é a medida, o número de caracteres por linha, e a faixa confortável é aproximadamente 45 a 75 caracteres. Defina com max-width em ch (a largura de avanço do glifo "0") para que o limite acompanhe a fonte, e o efeito no conforto de leitura supera quase qualquer escolha de fonte.

JunoEspaçamento que torna o texto legívelline-height define o espaço entre linhas, e um valor em torno de 1.5 torna o texto muito mais fácil de ler. Escreva como um número simples sem unidade para que o espaçamento cresça com o texto. Linhas apertadas são uma razão principal pela qual uma página parece difícil de ler, e isso resolve a maioria.

JunoEspaçamento que torna o texto legível Dê a line-height um valor sem unidade como 1.5 para que escale com o tamanho da fonte de cada elemento. Limite o comprimento da linha com max-width em ch para manter a medida em torno de 45 a 75 caracteres, o que é uma das maiores vitórias de legibilidade. Use letter-spacing com moderação, principalmente para abrir cabeçalhos em maiúsculas.

JunoEspaçamento que torna o texto legível Mantenha line-height sem unidade para que herde como fator e escale por elemento; uma unidade herda o comprimento computado e faz grandes cabeçalhos se sobreporem. Deixe letter-spacing em paz para corpo de texto e ajuste apenas para maiúsculas ou tipo de exibição grande. Limite a medida perto de 45 a 75 caracteres com max-width em ch, e supera a maioria das decisões de fonte para legibilidade.

Alinhando e decorando

Três propriedades lidam com alinhamento e toques finais. text-align move o texto para esquerda, direita ou centro. text-transform muda o caso, como fazer texto em maiúsculas. E text-decoration adiciona ou remove linhas como sublinhados.

h1 {
  text-align: center;          /* centra o cabeçalho */
}
.button {
  text-transform: uppercase;   /* mostra em maiúsculas */
  text-decoration: none;       /* remove o sublinhado do link */
}

text-transform: uppercase mostra o texto em maiúsculas sem você redigitá-lo, então o conteúdo original permanece como palavras normais. Sublinhados são adicionados ou removidos com text-decoration.

text-align posiciona texto inline em sua caixa (left, right, center, justify). text-transform muda o caso para exibição (uppercase, lowercase, capitalize) sem alterar o texto subjacente, então um leitor de tela ainda lê as palavras reais e seu HTML permanece limpo. text-decoration controla sublinhados, sobrelinhas e linhas cruzadas.

.card-title {
  text-align: center;
}
.nav-link {
  text-decoration: none;              /* remove o sublinhado padrão */
}
.price--old {
  text-decoration: line-through;      /* preço antigo riscado */
}

Dois hábitos que vale a pena manter. Evite text-align: justify para corpo de texto web, porque sem controle fino de hifenização abre rios feios de espaço em branco entre palavras. E quando você remove um sublinhado de um link, certifique-se de que outra dica como cor ainda o marca como link, ou você ocultou que é clicável. O capítulo cores e fundos cobre dar aos links uma cor distinta e acessível.

text-align define o alinhamento inline do conteúdo em sua caixa contêiner. Pule justify para corpo de texto web: navegadores justificam estirando o espaçamento de palavras, e sem o controle de hifenização e quebra de linha que tipógrafos de impressão têm, abre rios de espaço em branco e prejudica a legibilidade mais do que a borda arrumada ajuda.

text-transform (uppercase, lowercase, capitalize) muda apenas o caso renderizado, não o texto de origem, então a árvore de acessibilidade e seu marcação mantêm a caixa real. Esse é o jeito certo de fazer maiúsculas: transformar em CSS em vez de digitar maiúsculas no HTML, para que a tecnologia assistiva não leia a palavra letra por letra e o conteúdo permaneça editável como prosa normal. Combine maiúsculas com um pequeno letter-spacing positivo, já que maiúsculas definidas no rastreamento padrão do corpo leem apertadas.

text-decoration é uma abreviatura para linha, estilo, cor e espessura (text-decoration: underline wavy crimson 2px), com longhands como text-decoration-color e text-underline-offset para controle mais fino. O caso comum é text-decoration: none em links, e a regra que vem com isso é manter outra acessibilidade visível, já que remover o sublinhado remove o sinal principal de que o texto é um link.

.headline {
  text-transform: uppercase;
  letter-spacing: 0.04em;             /* maiúsculas precisam de espaço para respirar */
}

a {
  text-decoration-color: currentColor;
  text-underline-offset: 0.15em;      /* ajusta o sublinhado fora da linha de base */
}

text-align, text-transform e line-height herdam, então defini-los em um contêiner as flui para o texto dentro; o capítulo seletores cobre direcionar o contêiner certo para defini-los.

JunoAlinhando e decorandotext-align move texto para esquerda, direita ou centro, text-transform: uppercase o mostra em maiúsculas, e text-decoration adiciona ou remove linhas como sublinhados. Maiúsculas em CSS mantém seu texto real como palavras normais, então você nunca o redigita em maiúsculas. Use text-decoration: none quando quiser remover o sublinhado de um link.

JunoAlinhando e decorandotext-align coloca texto inline, text-transform muda o caso apenas para exibição, e text-decoration lida com sublinhados e linhas cruzadas. Pule justify na web, onde abre espaços feios entre palavras. Se remover o sublinhado de um link, mantenha outra dica como cor para que as pessoas ainda vejam que é clicável.

JunoAlinhando e decorando Evite justify para corpo de texto web; navegadores esticam o espaçamento de palavras e abrem rios de espaço em branco. Faça maiúsculas com text-transform, não digitando maiúsculas, para que a tecnologia assistiva leia palavras reais e a origem permaneça limpa, e adicione um pequeno letter-spacing às maiúsculas. Quando você define text-decoration: none em um link, mantenha outra acessibilidade para que ainda pareça um link.

A abreviatura de fonte e herança

Propriedades de fonte têm um traço útil: elas descem. Defina font-family no <body> e cada parágrafo, cabeçalho e link dentro a herda, então você raramente se repete.

body {
  font-family: system-ui, sans-serif;  /* tudo dentro herda isso */
  line-height: 1.5;
}

Por causa disso, a maioria de sua tipografia vive em um lugar perto do topo de sua folha de estilo, e elementos individuais apenas sobrescrevem o que precisam diferir.

Propriedades de fonte herdam: font-family, font-size, font-weight, font-style, line-height e cor todos passam de um elemento para seus descendentes a menos que sejam sobrescritos. É por isso que você define o tipo base no body uma vez e deixa descer, um ponto que o capítulo como o CSS funciona cobre em profundidade.

Há também uma abreviatura font que empacota várias propriedades em uma declaração, mas ela vem com uma armadilha que vale a pena conhecer antes de usá-la.

body {
  font: 1rem/1.5 system-ui, sans-serif;   /* tamanho/altura-de-linha família */
}

A ordem é fixa e font-size e font-family são ambos obrigatórios. O line-height vai após o tamanho com uma barra. Porque é uma abreviatura, qualquer propriedade de fonte que você deixe de fora é redefinida para seu valor inicial, o que pode apagar um font-weight que você definiu em outro lugar.

Propriedades de fonte herdam pela árvore, então font-family, font-size, font-weight, font-style e line-height definidos em um contêiner se aplicam a tudo dentro até que um elemento os sobrescreva. Definir o tipo base uma vez no body e sobrescrever seletivamente é o padrão idiomático; o capítulo como o CSS funciona detalha como herança e cascata decidem o valor final.

A abreviatura font define vários desses de uma vez, e seu problema é real: é uma abreviatura, então cada longhand que pode definir mas você omite é redefinido para seu valor inicial. Escreva font: 1rem/1.5 system-ui e qualquer font-weight, font-style ou font-variant definido antes é silenciosamente apagado de volta para normal. A sintaxe também tem uma ordem fixa e duas partes obrigatórias, font-size e font-family, com um line-height opcional anexado ao tamanho por uma barra.

.callout {
  font: italic 700 1rem/1.5 system-ui, sans-serif;  /* estilo peso tamanho/altura-de-linha família */
}

Duas notas mais avançadas. Fontes variáveis modernas compactam um intervalo contínuo de pesos (e às vezes largura e inclinação) em um arquivo, então font-weight: 550 pode ser um valor real e desenhado em vez de um arredondado quando a fonte expõe esse eixo. E a regra de acessibilidade da seção de dimensionamento se mantém ao longo disso: mantenha tamanhos em rem e altura de linha sem unidade para que todo o sistema de tipo escale quando o leitor ajusta seu tamanho de fonte padrão ou amplia a página, em vez de pregar o texto em uma grade de pixel fixa.

JunoA abreviatura de fonte e herança Configurações de fonte descem para os elementos dentro, então defina font-family no body uma vez e tudo a herda. Isso mantém sua tipografia em um lugar perto do topo da folha de estilo. Elementos individuais apenas sobrescrevem os bits que precisam mudar.

JunoA abreviatura de fonte e herança Propriedades de fonte herdam, então tipo base definido no body desce e você sobrescreve apenas o que difere. A abreviatura font empacota tamanho, altura de linha e família juntos, mas observe a armadilha: qualquer coisa que você deixe de fora é redefinida para seu valor inicial, o que pode apagar um peso que você definiu em outro lugar. Sua ordem é fixa, com tamanho e família obrigatórios.

JunoA abreviatura de fonte e herança Propriedades de fonte herdam, então defina o tipo base no body e sobrescreva seletivamente. A abreviatura font redefine cada longhand que você omite para seu valor inicial, para que possa silenciosamente apagar um peso ou estilo definido antes; use-a sabendo disso. Mantenha tamanhos em rem e altura de linha sem unidade para que o tipo escale com o tamanho padrão do leitor e zoom, e aproveite fontes variáveis quando você precisa de um intervalo contínuo de peso de um arquivo.