Leia este artigo para saber como utilizar a tipografia e as fontes no Adobe Muse.

Observação:

O Adobe Muse não está mais adicionando novos recursos e suspenderá o suporte em quinta-feira, 26 de março de 2020. Para obter informações detalhadas e assistência, consulte a a página de fim de serviço do Adobe Muse.

Observação:

  O Typekit foi renomeado para Adobe Fonts e está incluído na Creative Cloud e em outras assinaturas. Saiba mais.

Ao usar o Adobe Muse para criar páginas da Web, você pode escolher entre três tipos diferentes de fontes para aplicar ao texto. Ao publicar ou exportar páginas, o tipo de fonte aplicado determina como o conteúdo de texto é renderizado. Os três tipos diferentes de fontes também afetam o comportamento e o desempenho do site em graus variados, por isso é importante compreender os resultados da escolha de cada tipo.

Para adicionar texto a uma página da Web, você pode:

  • Usar a ferramenta Texto para digitar o texto diretamente na página
  • Ir para Arquivo > Posicionar e escolher um arquivo TXT externo para posicionar o conteúdo de texto
  • Copiar o texto de outra origem externa e colá-lo na página

Depois de criar um quadro de texto que contenha texto, use as opções no painel Texto ou no Painel de controle para definir a cor, o tamanho, o estilo, o alinhamento e outras opções de formatação da fonte. Você também pode usar o menu Fonte para escolher uma fonte (como Arial ou Helvetica) que corresponda ao design da sua página.

Neste artigo, você terá uma visão geral dos três tipos diferentes de fontes que podem ser aplicadas usando o menu Fonte. Você verá os benefícios e os problemas em potencial associados a cada tipo de fonte e as estratégias para o controle de texto e a edição de quadros de texto.

Entenda a diferença entre fontes da Web, fontes padrão e fontes do sistema

Ao aplicar a fonte para formatar o conteúdo do texto, você tem três opções:

  • Fontes da web
  • Fontes padrão
  • Fontes de sistema

Veja uma breve descrição de cada opção:

As fontes da web do Adobe Muse são as fontes Typekit, Edge Web Fonts e as Web Fonts auto-hospedadas. Elas permitem acessar uma biblioteca grande (com centenas de tipos de fonte) que você pode aplicar às suas páginas no Adobe Muse. Quando você aplica fontes da Web ao conteúdo de texto, o Adobe Muse adiciona automaticamente o código na página que criará links para a família de fontes. Quando um navegador visitar a página, ele fará download das fontes da Web necessárias para renderizar a página e exibir o conteúdo como texto. Isso tem muitas vantagens, porque você pode criar seus cabeçalhos e outro conteúdo de texto importante usando uma grande variedade de fontes, e as páginas publicadas ou exportadas irão renderizar o texto como selecionável. Entretanto, tome cuidado para não utilizar muitas fontes da Web na mesma página. Assim como designs com muitas imagens, o navegador pode demorar mais tempo para carregar uma página se tiver muitos arquivos vinculados. É melhor limitar os designs a não usar mais de três fontes da web por página e a manter o tamanho da fonte razoavelmente grande para garantir que o texto seja fácil de ler. Para obter mais informações, consulte Typekit e outras Web Fonts.

Fontes padrão (com recuos) são as fontes que provavelmente serão instaladas em todas as máquinas que visitam o site. Essas fontes incluem famílias de fontes padrão, como Arial, Georgia e Times New Roman. Você pode escolher de um pequeno conjunto de fontes padrão usadas com frequência, que são renderizadas no site ativo como texto. Fontes padrão carregam rapidamente, mas não são decorativas. As fontes padrão são a melhor opção ao definir a formatação de parágrafos longos de conteúdo de texto, porque são otimizadas para legibilidade na web. Use fontes padrão sempre que possível para garantir que o site tenha um bom desempenho e que não demore muito tempo para carregar.

As fontes do sistema permitem usar mais tipografia exclusiva, com base nas fontes específicas que você (o designer) instalou em sua máquina. Por exemplo, se você estiver desenvolvendo um site que tenha um tema específico, como um site de jardinagem, será possível instalar uma fonte de flor incomum que não está disponível na biblioteca de fontes da Web do Typekit. É recomendável aplicar as fontes do sistema ao texto com moderação, mas lembre-se de que o conteúdo do texto será exportado como imagens. Isso significa que a página demorará mais para carregar e os visitantes não poderão selecionar, copiar ou colar o texto na página. As fontes do sistema também são ideais para pequenos fragmentos de texto, como cabeçalhos. Para facilitar o uso do site, evite usar fontes do sistema para endereços, números de telefone e qualquer conteúdo que os visitantes possam querer copiar e colar em um calendário ou em uma mensagem de e-mail. Lembre-se de que alguns visitantes têm dificuldade de ler texto menor e podem definir o navegador para aumentar o tamanho da fonte; mas essa estratégia não ajudará a ler o texto exportado como arquivos de imagem. Lembre-se também de que os mecanismos de pesquisa indexam sites, à procura de conteúdo de texto para definir a classificação de um site nos resultados da pesquisa. Por essas razões, é melhor aplicar somente as fontes do sistema quando realmente precisar criar um impacto no design. Se houver uma fonte da web ou fonte padrão comparável, aplique essa fonte.

Para aplicar cada um desses três tipos de fontes, selecione texto usando a ferramenta Texto e escolha a opção desejada no menu de fontes.

Menu Fontes
Escolha a fonte que deseja usar com o menu Fontes.

Na parte superior do menu Fonte, você verá a lista de fontes que foram usadas recentemente. Isso facilita a reaplicação de tais fontes quando você estiver projetando páginas. Posteriormente, se você decidir que não quer ver muitas fontes, ou se quiser limpar todas as fontes usadas recentemente, é possível atualizar as configurações nas preferências do Adobe Muse.

Fontes recentemente usadas
Defina o número de fontes recentes ou limpe a lista de fontes recentes no menu Fontes.

Nas seções a seguir, você encontrará descrições mais detalhadas de cada tipo de fonte e de como sua aplicação afeta a renderização de conteúdo de texto em um site ao vivo.

Aplicar fontes ao texto selecionado

Para obter os melhores resultados de renderização de fontes, escolha a fonte mais adequada ao seu uso pretendido. Por exemplo, quando você estiver aplicando uma fonte aos parágrafos (grandes quantidades de texto contínuo exibido em tamanhos de fonte menores), evite escolher fontes decorativas mais ornamentadas (que geralmente devem ser usadas para cabeçalhos exibidos em tamanhos de fontes maiores).

Uma das considerações mais importantes em relação ao texto em sites é garantir que ele esteja legível. As fontes enfeitadas não são renderizadas corretamente em tamanhos de fonte pequenos, pois não há resolução suficiente na Web para renderizar a quantidade de detalhes visuais que elas contêm.

Além disso, uma fonte de parágrafo deve ter os estilos regular, itálico, negrito e negrito itálico disponíveis, para que tenha a capacidade de destacar ou enfatizar o texto para realçar nomes de pessoas, títulos de livros e filmes e outros conteúdos distintos dentro de um parágrafo. Muitas famílias de fontes decorativas e altamente estilizadas não incluem essas opções de estilo.

As fontes podem ser tecnicamente otimizadas para usos particulares também. Uma fonte poderá usar um formato geométrico que oferece melhor renderização, especificamente em tamanhos maiores, ou poderá conter dicas de fontes, para alcançar a renderização ideal em tamanhos menores nas plataformas. Conforme mencionado anteriormente, quando você acessa fontes da Web no Adobe Muse, a biblioteca de fontes da Web permite filtrar as fontes para exibir a lista de uso recomendado em parágrafos ou em títulos. Se você não souber se uma fonte específica funcionará bem para títulos ou parágrafos de texto no seu design, escolha as fontes com base nessas recomendações de parágrafo e títulos tenha certeza de que as páginas criadas serão fáceis de ler.

Você pode aplicar estilo ao texto com fontes da web seguindo o mesmo processo usado para aplicar fontes padrão e fontes de sistema. Para criar o estilo do texto usando fontes da Web, siga estas etapas:

  1. Use a ferramenta Texto para selecionar um texto em um quadro de texto.

  2. Selecione a fonte a ser aplicada no menu Fonte, escolha Web Fonts e selecione o nome da Família de fontes na lista.

    Escolher Web Fonts
    Aplique uma fonte da web ao conteúdo de texto selecionado escolhendo o nome da fonte.

    Depois que você aplicar uma fonte, poderá usar o painel Texto ou as opções no painel de controle para definir o tamanho, a cor e outros atributos da fonte, conforme desejar.

    Observação:

    As fontes da Web se comportam como qualquer outro tipo de fonte quando você cria páginas. É possível editar a formatação do texto, editar e redimensionar o quadro de texto e posicioná-lo sobre a página onde deverá ser exibido.

  3. Quando terminar de criar um site, clique em Visualizar para ver como o design é exibido no Adobe Muse. Ou escolha Arquivo > Visualizar página no navegador, para exibir a revisão do design na janela do navegador.

    Conforme mencionado acima, as fontes da web são especialmente úteis para a criação de páginas interessantes, pois você pode escolher dentre centenas de fontes e (diferentemente das fontes de sistema) a tipografia exclusiva na página será exportada como texto, não como arquivos de imagem.

  4. Observe que durante a visualização de página em um navegador, o texto da fonte da Web é renderizado como conteúdo de texto. Tente selecioná-lo e copiá-lo para ver como se comporta.

    Texto de fonte da web selecionável
    O texto de fonte da Web pode ser selecionado em um navegador da Web, pois é exportado como texto.

É preferível exportar o conteúdo de texto como texto, em vez de imagens. Quando você escolhe fontes do sistema, o conteúdo de texto é exportado como imagens, o que aumenta o tempo de carregamento das páginas.

Utilizando fontes da Web, os usuários podem copiar e colar o conteúdo de texto diretamente a partir das páginas do site. Isso permite que eles acessem e armazenem endereços, números de telefone e outras informações importantes que queiram compartilhar com alguém ou armazenar offline em seu Catálogo de endereços.

A renderização de fontes da Web como texto também ajuda a melhorar a classificação dos resultados da pesquisa de site, pois como os mecanismos de pesquisa indexam o conteúdo de sites, eles analisam conteúdo de texto mais facilmente do que arquivos de imagem. Assim, o uso de fontes da web ajuda os sites a coletarem mais tráfego, bem como carregar páginas de modo mais eficiente para visitantes.

E, finalmente, os visitantes que usam leitores de texto terão muito mais facilidade para navegar no conteúdo de texto. A renderização de áreas importantes, como cabeçalhos de página, como texto garante que o site seja mais acessível para todos.

Trabalhar com fontes padrão

O menu Fonte contém uma seção que lista as fontes padrão. Você pode aplicar livremente fontes padrão para criar páginas, porque todos os computadores modernos já têm essas fontes instaladas. Não é necessário instalar nada novo na sua máquina e os visitantes já terão as fontes disponíveis em seus computadores para renderizar o conteúdo do texto nas páginas.

As fontes padrão são um pequeno conjunto de fontes de computador comumente usadas, que todos os computadores compartilham para exibir conteúdo de texto. O texto que usa padrão é renderizado do site ao vivo como texto.

Como as fontes da Web, as fontes padrão apresentam todos os benefícios da renderização de texto como texto, incluindo:

  • Os visitantes podem selecionar, copiar e colar conteúdo de página da web
  • As páginas com conteúdo de texto são carregadas mais rapidamente, em comparação com as páginas que têm mais imagens
  • A classificação dos resultados da pesquisa melhora porque os mecanismos de pesquisa podem indexar conteúdo de texto
  • Os visitantes que usam leitores de tela podem acessar o texto mais facilmente do que o conteúdo de imagem

Entretanto, a desvantagem de usar fontes padrão é que você fica limitado a um pequeno número de opções ao criar páginas.

Ao usar o menu Fonte para escolher fontes padrão, a lista completa é exibida.

Lista completa de Fontes padrão
Escolha Fontes padrão no menu Fontes para ver a lista completa.

As fontes padrão são limitadas a:

  • Arial
  • Comic Sans
  • Courier New
  • Geneva
  • Georgia
  • Helvetica
  • Lucida Sans
  • Palatino
  • Times
  • Trebuchet
  • Verdana

Observe que, se você focalizar uma opção, uma dica de ferramenta exibirá uma lista de fontes alternativas.

Essa dica de ferramenta indica que, caso o visitante não tenha a fonte que você aplicar instalada, uma fonte de aparência semelhante será fornecida automaticamente. O design da página fica parecido com o design original e a fonte ausente falhará sem que o visitante perceba. Ele não receberá uma mensagem de erro e o conteúdo da página será carregado. O texto somente será exibido com uma fonte semelhante, alternativa àquela instalada em sua máquina.

De modo geral, as fontes padrão são uma boa escolha para o conteúdo de página que precise estar legível e fácil para navegação dos visitantes, mas o conjunto limitado torna mais difícil encontrar uma fonte que reflita a estética do local.

Trabalhar com fontes de sistema

As fontes de sistema são aquelas instaladas em seu computador individual específico. Você pode instalá-las para uso em vários programas, incluindo programas de edição de imagens. E essas mesmas fontes também estão disponíveis para aplicação durante o design de páginas no Adobe Muse.

Por exemplo, se você estiver criando um site sobre um terremoto, poderá instalar uma fonte com uma aparência irregular ou tremida, para que os cabeçalhos de página correspondam ao tema do design. Qualquer fonte que você instalar poderá ser usada no Adobe Muse, portanto, não haverá limites nos seus layouts de página e você poderá personalizá-las completamente (ou usar uma fonte personalizada para o cliente no site). As fontes de sistema permitem que você use uma grande variedade de fontes exclusivas para que seja possível realmente aprimorar as páginas.

Os visitantes visualizarão o texto com fontes de sistema aplicadas exatamente conforme o estilo aplicado, embora não tenham as fontes instaladas no computador. Para fazer isso, o Adobe Muse exporta automaticamente qualquer texto usando fontes de sistema como arquivos de imagem. É uma operação perfeita que acontece em segundo plano. E, à medida que você criar as páginas, o texto na fonte do sistema permanecerá editável para que você possa continuar a fazer alterações.

Se escolher as fontes de sistema no menu Fonte, você verá a lista de fontes instaladas no computador.

Lista de Fontes do sistema
A seção Fontes de sistema exibe a lista de fontes instaladas.

A desvantagem de aplicar fontes de sistema ao texto é que o texto é renderizado no site ao vivo como imagens, o que torna o carregamento do conteúdo de texto muito mais demorado.

Há uma compensação no uso de fontes de sistema, pois é possível usar uma tipografia mais exclusiva, com base nas fontes específicas que você (o designer) instalou no computador. Porém, em virtude da aplicação dessas famílias de fontes, as páginas ficam pesadas por conta das imagens e demoram mais tempo para carregar. E isso pode afetar o desempenho do site.

Portanto, aplique fontes de sistema ao texto em seus designs com moderação.

Além disso, é uma prática recomendada selecionar texto com fontes de sistema aplicadas, mesmo que o texto não esteja vinculado, e inserir um título descritivo no campo Título do menu Hiperlink.

Quando visualizar a página em um navegador, o Título será exibido como uma dica de ferramenta quando passar o mouse sobre o texto.

O Texto do título é exibido como dica de ferramenta
O texto do título inserido é exibido como uma dica de ferramenta.

A marca de título é útil para os visitantes que usem leitores de tela e que estejam ouvindo o conteúdo do site, em vez visualizá-los. A adição de títulos também é muito importante, pois os mecanismos de pesquisa que indexam um site usarão o título da imagem para categorizar melhor o conteúdo do site, especialmente se o texto da imagem estiver transmitindo informações importantes, como os cabeçalhos de páginas.

Sempre que possível, procure as fontes padrão que forem equivalentes às fontes de sistema instaladas e use-as.

Aplicar e redefinir fontes da web usadas recentemente

Depois que você aplica fontes ao texto no Adobe Muse, a primeira seção do menu Fonte exibe o nome das fontes. Esse recurso facilita o processo de reaplicação das mesmas fontes a outro texto no design do site, porque as fontes são fáceis de localizar. Não é necessário memorizar quais são fontes da Web, fontes padrão e fontes do sistema. Todos os três tipos de fontes são listados na parte superior, caso você as tenha aplicado anteriormente.

Geralmente, é uma prática da web limitar o número de fontes usadas em uma página. Se você usar 4 faces de fonte ou menos em uma página, o conteúdo de texto tenderá a ser mais legível quando visualizado pelos visitantes na tela. Geralmente, a seção Fontes usadas recentemente lista apenas alguns nomes de fontes, facilitando a navegação.

Entretanto, você pode testar com diferentes fontes em um design. Ou você pode criar diversas seções diferentes do site, e verá que a lista Fontes usadas recentemente no menu Fontes ficou muito maior. Se a lista estiver muito longa, será mais difícil escolher a face de fonte desejada.

Você pode controlar a exibição das fontes listadas na seção Fontes usadas recentemente. Siga estas etapas:

  1. Escolha Adobe Muse > Preferências para abrir a caixa de diálogo Preferências.

  2. Na seção Tipo, digite um valor numérico ou use as setas para cima e para baixo para redefinir o Número de fontes recentes.

    Redefinir Número de fontes recentes
    Defina o número de fontes recentes para exibição.

    Clicando no botão Limpar fontes recentes, você apagará todas as fontes recentes da lista.

  3. Clique em OK para salvar as alterações e fechar a caixa de diálogo Preferências.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online