Articles
Introdução ao CSS
Propriedades CSS relacionadas ao espaçamento de texto

Propriedades CSS relacionadas ao espaçamento de texto

Este artigo explica as propriedades CSS relacionadas ao espaçamento de texto.

Você pode aprender sobre o uso e como escrever propriedades como line-height e word-spacing.

YouTube Video

Criando HTML para visualização

css-text-space.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-text-space.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Text-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Text-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>line-height</h3>
 23            <section>
 24                <header><h4>line-height: normal</h4></header>
 25                <section class="sample-view">
 26                    <p class="line-height-normal">This is a paragraph with normal line height.</p>
 27                </section>
 28                <header><h4>line-height: 1.5</h4></header>
 29                <section class="sample-view">
 30                    <p class="line-height-150">This is a paragraph with 1.5 line height.</p>
 31                </section>
 32                <header><h4>line-height: 200%</h4></header>
 33                <section class="sample-view">
 34                    <p class="line-height-200">This is a paragraph with 200% line height.</p>
 35                </section>
 36            </section>
 37        </article>
 38        <article>
 39            <h3>letter-spacing</h3>
 40            <section>
 41                <header><h4>letter-spacing: normal</h4></header>
 42                <section class="sample-view">
 43                    <p class="letter-spacing-normal">This is text with normal letter spacing.</p>
 44                </section>
 45                <header><h4>letter-spacing: 4px</h4></header>
 46                <section class="sample-view">
 47                    <p class="letter-spacing-wide">This is text with wide letter spacing.</p>
 48                </section>
 49                <header><h4>letter-spacing: -1px</h4></header>
 50                <section class="sample-view">
 51                    <p class="letter-spacing-narrow">This is text with narrow letter spacing.</p>
 52                </section>
 53            </section>
 54        </article>
 55        <article>
 56            <h3>word-spacing</h3>
 57            <section>
 58                <header><h4>word-spacing: normal</h4></header>
 59                <section class="sample-view">
 60                    <p class="word-spacing-normal">This is text with normal word spacing.</p>
 61                </section>
 62                <header><h4>word-spacing: 4px</h4></header>
 63                <section class="sample-view">
 64                    <p class="word-spacing-wide">This is text with wide word spacing.</p>
 65                </section>
 66                <header><h4>word-spacing: -1px</h4></header>
 67                <section class="sample-view">
 68                    <p class="word-spacing-narrow">This is text with narrow word spacing.</p>
 69                </section>
 70                <header><h4>word-spacing: -0.1em; letter-spacing: -0.05em;</h4></header>
 71                <section class="sample-view">
 72                    <p class="word-and-letter-spacing">This is text with word and letter spacing.</p>
 73                </section>
 74            </section>
 75        </article>
 76        <article>
 77            <h3>word-break</h3>
 78            <section>
 79                <header><h4>word-break: normal</h4></header>
 80                <section class="sample-view">
 81                    <p class="box word-break-normal">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 82                </section>
 83                <header><h4>word-break: break-all</h4></header>
 84                <section class="sample-view">
 85                    <p class="box word-break-break-all">Thisisaverylongwordthatwillnotbreakwithword-breaknormal.</p>
 86                </section>
 87                <header><h4>word-break: keep-all</h4></header>
 88                <section class="sample-view">
 89                    <p class="box word-break-keep-all">&#12371;&#12428;&#12399;&#26085;&#26412;&#35486;&#12398;&#25991;&#31456;&#12391;&#12377;&#12290;&#12371;&#12398;&#35373;&#23450;&#12391;&#12399;&#33258;&#28982;&#12395;&#25913;&#34892;&#12373;&#12428;&#12414;&#12377;&#12290;</p>
 90                </section>
 91            </section>
 92        </article>
 93        <article>
 94            <h3>hyphens</h3>
 95            <section>
 96                <header><h4>hyphens: none</h4></header>
 97                <section class="sample-view">
 98                    <p class="no-hyphens">
 99                        Supercalifragilisticexpialidocious is a very long word.
100                    </p>
101                </section>
102                <header><h4>HTML</h4></header>
103<pre>
104&lt;p class="no-hyphens"&gt;
105    Supercalifragilisticexpialidocious is a very long word.
106&lt;/p&gt;
107</pre>
108                <header><h4>hyphens: manual</h4></header>
109                <section class="sample-view">
110                    <p class="manual-hyphens">
111                        Super&shy;califragilistic&shy;expialidocious is a very long word.
112                    </p>
113                </section>
114                <header><h4>HTML</h4></header>
115<pre>
116&lt;p class="manual-hyphens"&gt;
117    Super&amp;shy;califragilistic&amp;shy;expialidocious is a very long word.
118&lt;/p&gt;
119</pre>
120                <header><h4>hyphens: auto</h4></header>
121                <section class="sample-view">
122                    <p class="auto-hyphens">
123                        Supercalifragilisticexpialidocious is a very long word.
124                    </p>
125                </section>
126                <header><h4>HTML</h4></header>
127<pre>
128&lt;p class="auto-hyphens"&gt;
129    Supercalifragilisticexpialidocious is a very long word.
130&lt;/p&gt;
131</pre>
132            </section>
133        </article>
134    </main>
135</body>
136</html>

Tipografia (Relacionado à Margem de Texto)

Propriedade line-height 

 1/* Line height examples */
 2.line-height-normal {
 3    line-height: normal; /* Default line height */
 4}
 5
 6.line-height-150 {
 7    line-height: 1.5; /* 1.5 times the font size */
 8}
 9
10.line-height-200 {
11    line-height: 200%; /* 200% of the font size */
12}

line-height é uma propriedade CSS usada para definir o espaçamento entre linhas (altura da linha). line-height especifica o espaço vertical entre linhas, usado para melhorar a legibilidade ou ajustar o espaçamento como parte do design.

Principais usos do line-height

Números sem unidade 
1p {
2    line-height: 1.5; /* 1.5 times the font size */
3}
  • Especifique uma altura relativa ao tamanho da fonte. Por exemplo, especificar 1.5 define a altura da linha em 1,5 vezes o tamanho da fonte. Este método é útil para design responsivo.
Porcentagem 
1p {
2    line-height: 150%;
3}
  • Especifique a altura da linha como uma porcentagem do tamanho da fonte. Por exemplo, especificar 150% define a altura da linha como 150% do tamanho da fonte.
Valores fixos (px, em, rem, etc.) 
1p {
2    line-height: 20px;
3}
  • Especifique a altura da linha em unidades absolutas. Por exemplo, você pode especificar um valor concreto como 20px, mas pode não ter flexibilidade em design responsivo.
normal 
1p {
2    line-height: normal;
3}
  • Especificar normal aplica as configurações padrão de espaçamento de linha do navegador. Normalmente, será cerca de 1,2 a 1,4 vezes o tamanho da fonte.

Exemplos de Uso do line-height

Parágrafos legíveis
  • Uma line-height de cerca de 1.5 a 1.6 é geralmente recomendada para legibilidade. Se o espaçamento de linha for muito estreito, o texto ficará apertado e difícil de ler, e se for muito amplo, o texto parecerá desconexo.
Design de cabeçalhos
  • Para cabeçalhos e títulos, onde o texto é maior, o espaçamento de linha pode ser reduzido. Configurações como 1.1 ou 1.2 são frequentemente usadas.

Resumo

  • line-height é uma propriedade importante para melhorar tanto a legibilidade quanto o design do texto.
  • O uso de valores relativos (números ou porcentagens) facilita a adaptação ao design responsivo.
  • Para cabeçalhos com texto grande e parágrafos com texto menor, é crucial definir um espaçamento de linha apropriado para cada um.

Aproveitar essa propriedade pode tornar a aparência do texto mais legível e melhorar a qualidade do design.

Propriedade letter-spacing 

 1/* Letter spacing examples */
 2.letter-spacing-normal {
 3    letter-spacing: normal; /* Default letter spacing */
 4}
 5
 6.letter-spacing-wide {
 7    letter-spacing: 4px; /* Increase letter spacing */
 8}
 9
10.letter-spacing-narrow {
11    letter-spacing: -1px; /* Decrease letter spacing */
12}

letter-spacing é uma propriedade CSS usada para ajustar o espaçamento entre caracteres (espaçamento das letras). Essa propriedade pode ser usada para organizar o design do texto, melhorar a legibilidade e alcançar estilos específicos.

Neste exemplo, é especificado da seguinte forma.

  • normal: O espaçamento de letras padrão. É um valor padrão determinado pelo navegador e pela fonte.
  • 4px: Um exemplo de espaçamento de letras ampliado. Adiciona 4 pixels de espaço entre cada caractere.
  • -1px: Um exemplo de espaçamento de letras reduzido. Reduz 1 pixel de espaço entre cada caractere.

Como usar letter-spacing

Valores com unidades 
1p.increased {
2    letter-spacing: 2px;  /* Increase letter spacing by 2px */
3}
4p.decreased {
5    letter-spacing: -1em;  /* Decrease letter spacing by 1em */
6}
  • Definir um valor positivo aumentará o espaçamento entre letras.
  • Definir um valor negativo diminuirá o espaçamento entre letras.
  • As unidades geralmente são em px (pixels) ou em.
Padrão: normal 
1p {
2    letter-spacing: normal;  /* Default letter spacing */
3}
  • Use o espaçamento entre letras padrão. Normalmente, o espaçamento entre letras padrão definido pela fonte é aplicado.

Exemplos de uso de letter-spacing

  • Legibilidade melhorada: Para tamanhos de fonte pequenos ou fontes excessivamente condensadas, você pode melhorar a legibilidade aumentando o letter-spacing.
  • Ajuste de design: Você pode ajustar o espaçamento entre letras para enfatizar visualmente elementos de design, como títulos ou logotipos.
  • Ajuste entre palavras: Você pode ajustar o espaçamento no nível das letras, em vez de entre palavras. letter-spacing ajusta o espaçamento a nível de letras, mas use word-spacing para expandir o espaço entre palavras.
  • Equilíbrio do design: Se você aumentar muito o espaçamento entre letras, todo o texto pode parecer muito esticado. Por outro lado, se você diminuir muito, o texto pode ficar apertado e difícil de ler, por isso é importante manter um equilíbrio apropriado.

Resumo

  • letter-spacing é uma propriedade que ajusta o espaço entre letras, afetando tanto o design quanto a legibilidade.
  • Você pode aumentar o espaçamento com valores positivos e diminuí-lo com valores negativos.
  • É eficaz para títulos e elementos de design específicos, mas tenha cuidado para não comprometer a legibilidade.

Usando esta propriedade, você pode ajustar a aparência do texto e obter designs atraentes.

Propriedade word-spacing 

 1/* Word spacing examples */
 2.word-spacing-normal {
 3    word-spacing: normal; /* Default word spacing */
 4}
 5
 6.word-spacing-wide {
 7    word-spacing: 4px; /* Increase word spacing */
 8}
 9
10.word-spacing-narrow {
11    word-spacing: -1px; /* Decrease word spacing */
12}
13
14.word-and-letter-spacing {
15    word-spacing: -0.1em;
16    letter-spacing: -0.05em;
17}

word-spacing é uma propriedade CSS que controla o espaço entre palavras em um texto. O uso adequado desta propriedade pode melhorar o equilíbrio visual e a legibilidade do texto. word-spacing é particularmente útil em designs focados em tipografia e cenários de design responsivo.

Neste exemplo, é especificado da seguinte forma.

  • normal: Aplica o espaçamento padrão entre palavras. Este é o valor inicial do navegador.
  • 4px: Um exemplo de aumento no espaçamento entre palavras. Adiciona 4 pixels de margem entre cada palavra.
  • -1px: Um exemplo de diminuição no espaçamento entre palavras. Reduz o espaço entre cada palavra em 1 pixel.
  • word-and-letter-spacing: Um exemplo de espaçamento reduzido entre palavras e letras. Reduz o espaço entre palavras em 0.1em e entre letras em 0.05em em comparação ao normal.

Usando Valores Positivos e Negativos

Definir um valor positivo para word-spacing irá expandir o espaçamento entre palavras. Por outro lado, usar valores negativos estreita os espaços entre as palavras. Valores negativos podem ser usados para enfatizar efeitos visuais ou reduzir o espaçamento entre letras por razões específicas de design.

Diferença com letter-spacing

word-spacing é uma propriedade que ajusta o espaço entre palavras, enquanto letter-spacing ajusta o espaço entre letras. Combinando essas propriedades, você pode ter um controle mais preciso sobre a tipografia de textos inteiros.

Cuidados e Melhores Práticas

  • Ajuste Excessivo de Espaços: O uso excessivo de word-spacing pode levar a uma redução na legibilidade. Especialmente espaços muito grandes ou muito pequenos podem ser cansativos para os usuários, tornando ajustes moderados importantes.
  • Design Responsivo: Especificar valores relativos usando em ou rem é eficaz para design responsivo, pois garante a exibição adequada em diferentes tamanhos de tela.
  • Ajuste de Estilo de Cabeçalhos: Ao ampliar o espaço entre palavras em textos de cabeçalho, você pode adicionar ênfase visual. Isso permite que você esclareça a hierarquia do conteúdo e alcance um design sofisticado.

Propriedade word-break 

 1p.box {
 2    width: 200px;
 3    border: 1px solid #000;
 4    margin-bottom: 20px;
 5}
 6
 7.word-break-normal {
 8    word-break: normal;
 9}
10
11.word-break-break-all {
12    word-break: break-all;
13}
14
15.word-break-keep-all {
16    word-break: keep-all;
17}

word-break é uma propriedade CSS que controla como o texto é quebrado quando ultrapassa a largura do contêiner. Normalmente, os navegadores quebram linhas nos limites das palavras, mas configurações específicas podem melhorar a aparência e a legibilidade quando palavras longas ou URLs estão presentes.

Você pode especificar os seguintes valores para a propriedade word-break.

  • normal

    normal é o valor padrão. Quando uma palavra ultrapassa a largura do contêiner, ela será quebrada nos limites das palavras. Esta configuração é comum em idiomas como o inglês, e as quebras não ocorrem no meio das palavras.

  • break-all

    break-all é uma configuração em que quebras de linha podem ser inseridas após qualquer caractere, conforme necessário. Especialmente quando palavras longas ou URLs estão inclusos, as quebras de linha ocorrem no nível de caractere para evitar a disrupção do layout.

  • keep-all

    keep-all é uma configuração usada particularmente para idiomas asiáticos (japonês, chinês, coreano, etc.). Nesta configuração, a palavra inteira é preservada, e não ocorrem quebras no meio das palavras. No entanto, para idiomas com separação por espaços como o inglês, as quebras de linha normais nos limites das palavras são aplicadas.

Este exemplo mostra três configurações diferentes de word-break. Com word-break-normal, a palavra inteira é preservada e são feitas quebras nos limites das palavras se ultrapassar a largura do contêiner. Com word-break-break-all, as quebras ocorrem mesmo no meio das palavras. word-break-keep-all permite quebras naturais para idiomas asiáticos como o japonês e quebras nos limites das palavras para o inglês.

Cenários de Aplicação de word-break

Dispositivos Móveis e Design Responsivo 

1@media (max-width: 600px) {
2  p {
3    word-break: break-all;
4  }
5}

Em dispositivos móveis, a largura da tela é limitada, o que pode fazer com que textos, incluindo URLs ou palavras longas, ultrapassem a largura da tela. Nesses casos, aplicar word-break: break-all; permite quebras de linha no nível de caractere para encaixar na largura da tela, melhorando a legibilidade.

Propriedade hyphens 

 1p.no-hyphens {
 2    width: 200px;
 3    hyphens: none;
 4}
 5
 6p.manual-hyphens {
 7    width: 200px;
 8    hyphens: manual;
 9}
10
11p.auto-hyphens {
12    width: 200px;
13    hyphens: auto;
14}

  • A propriedade hyphens é usada em CSS para especificar como a hifenização das palavras (divisão de palavras com hífens) deve ser tratada ao quebrar linhas de texto. Definindo esta propriedade adequadamente, você pode melhorar a legibilidade e a aparência do texto. A hifenização é particularmente útil quando palavras longas precisam ser divididas.

  • Como as regras de hifenização variam por idioma, esta propriedade depende da localidade do texto.

Sintaxe 

1element {
2    hyphens: none | manual | auto;
3}

A propriedade hyphens pode ser configurada com os seguintes valores:.

  • none: Nenhuma hifenização é aplicada. As palavras, em geral, só serão quebradas no final da palavra.
  • manual: A hifenização é aplicada manualmente. Neste caso, você precisa especificar os pontos de hifenização manualmente no HTML. Por exemplo, você pode usar &shy; (hífen suave).
  • auto: O navegador aplica automaticamente a hifenização em posições apropriadas. Neste caso, o idioma do documento (atributo lang) deve ser especificado corretamente.

Notas

  • Importância das Configurações de Idioma: Ao usar hyphens: auto;, a hifenização adequada exige que o atributo lang do documento HTML esteja configurado corretamente.
  • Dependência de Fonte: Algumas fontes podem não ser adequadas para hifenização.
  • Uso de Dicionários de Hifenização: As regras de hifenização dependem dos dicionários usados pelo navegador. Portanto, pode não funcionar como esperado para determinados idiomas.

Resumo

Ao utilizar corretamente a propriedade hyphens, você pode melhorar significativamente o layout do texto. Especialmente para sites multilíngues e designs otimizados para dispositivos móveis, o uso adequado de auto e manual pode melhorar a experiência do usuário.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video

Propriedades de CSS relacionadas ao textoPropriedades CSS para exibição de código e citações