Estilo de Texto

Text, Font

W3C TR CSS 2.2: Text, Font
Fundamental text and font styling

Color

Values: <color>

Valores

/* <named-color> value */
color: red;
 
/* <hex-color> value */
color: #009900;
 
/* <rgb-color> value */
color: rgb(34, 12, 64);
 
/* <hsl-color> value */
color: hsl(30, 100%, 50%);

Valores

/* <named-color> value */
color: red;
 
/* <hex-color> value */
color: #009900;
 
/* <rgb-color> value */
color: rgb(34, 12, 64);
 
/* <hsl-color> value */
color: hsl(30, 100%, 50%);

Style	Style	Preview
color: tomato;	`<named-color>`	Lorem ipsum
color: #FF6347;	`<hex-color>`	Lorem ipsum
color: rgb(255,99,71);	`<rgb-color>`	Lorem ipsum
color: hsl(9, 100%, 64%);	`<hsl-color>`	Lorem ipsum
color: rgba(255,99,71, .6);	`<rgba-color>`	Lorem ipsum

Fonte: Tomato Color (Shades, Tints, Triadic Colors, Analogous Colors, Monochromatic Colors, Complementary Color)

Font family

MDN

Values: [[ <family-name> | <generic-family> ] [, [ <family-name> | <generic-family>] ]* ] | inherit

<family-name> = <string>
<generic-family> = serif | sans-serif | cursive | fantasy | monospace

Valores

/* A font family name and a generic family name */
font-family: Gill Sans Extrabold, sans-serif;
font-family: 'Goudy Bookletter 1911', sans-serif;
 
/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;

Valores

/* A font family name and a generic family name */
font-family: Gill Sans Extrabold, sans-serif;
font-family: 'Goudy Bookletter 1911', sans-serif;
 
/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;

Font stacks / Fallbacksssss

body {
  font-family: Ubuntu, Arial, sans-serif;
}

Font stacks / Fallbacksssss

body {
  font-family: Ubuntu, Arial, sans-serif;
}

Style	Syntax	Preview
font-family: serif;	`<generic-family>`	Lorem ipsum
font-family: Times, serif;	`<family-name>`, `<generic-family>`	Lorem ipsum
font-family: “Time New Roman”, serif;	`<family-name>`, `<generic-family>`	Lorem ipsum
font-family: Ubuntu, Arial, sans-serif;	`<family-name>`, `<family-name>`, `<generic-family>`	Lorem ipsum

/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
 
/* <relative-size> values */
font-size: smaller;
font-size: larger;
 
/* <length> values */
font-size: 12px;
font-size: 0.8rem;
 
/* <percentage> values */
font-size: 80%;

Valores

/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
 
/* <relative-size> values */
font-size: smaller;
font-size: larger;
 
/* <length> values */
font-size: 12px;
font-size: 0.8rem;
 
/* <percentage> values */
font-size: 80%;

Style	Syntax	Preview
font-size: small;	`<abosolut-size>`	Lorem ipsum
font-size: large;	`<abosolut-size>`	Lorem ipsum
font-size: larger;	`<relative-size>`	Lorem ipsum
font-size: 16px;	`<length>`	Lorem ipsum
font-size: 1.5rem;	`<length>`	Lorem ipsum
font-size: 1.5em;	`<length>`	Lorem ipsum
font-size: 150%;	`<percentage>`	Lorem ipsum

Font style

MDN

Values: normal | italic | oblique | inherit

Valores

font-style: normal;
font-style: italic;
font-style: oblique;

Valores

font-style: normal;
font-style: italic;
font-style: oblique;

Style	Preview
font-style: normal;	Lorem ipsum
font-style: italic;	Lorem ipsum
font-style: oblique;	Lorem ipsum

Font weight

MDN

Values: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Valores

/* Keyword values */
font-weight: normal;
font-weight: bold;
 
/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;
 
/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

Valores

/* Keyword values */
font-weight: normal;
font-weight: bold;
 
/* Keyword values relative to the parent */
font-weight: lighter;
font-weight: bolder;
 
/* Numeric keyword values */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;

Style	Preview
font-weight: normal;	Lorem ipsum
font-weight: bold;	Lorem ipsum
font-weight: lighter;	Lorem ipsum
font-weight: bolder;	Lorem ipsum
font-weight: 100;	Lorem ipsum
font-weight: 200;	Lorem ipsum
font-weight: 300;	Lorem ipsum
font-weight: 400;	Lorem ipsum
font-weight: 500;	Lorem ipsum
font-weight: 600;	Lorem ipsum
font-weight: 700;	Lorem ipsum
font-weight: 800;	Lorem ipsum
font-weight: 900;	Lorem ipsum

Text decoration

MDN

Values: <text-decoration-line> || <text-decoration-color> || <text-decoration-style>

<text-decoration-line> = none | [ underline || overline || line-through || blink ]
<text-decoration-color> = <color>
<text-decoration-style> = solid | double | dotted | dashed | wavy

Valores

/* Keyword values */
text-decoration: none; /* No text decoration */
text-decoration: underline; /* Underlining */
text-decoration: underline red; /* Red underlining */
text-decoration: underline wavy red; /* Red wavy underlining */

Valores

/* Keyword values */
text-decoration: none; /* No text decoration */
text-decoration: underline; /* Underlining */
text-decoration: underline red; /* Red underlining */
text-decoration: underline wavy red; /* Red wavy underlining */

Style	Preview
text-decoration: none;	Lorem ipsum
text-decoration: underline;	Lorem ipsum
text-decoration: line-through;	Lorem ipsum
text-decoration: overline;	Lorem ipsum
text-decoration: underline red;	Lorem ipsum
text-decoration: underline red wavy;	Lorem ipsum

Text transform

MDN

Values: none | capitalize | uppercase | lowercase | full-width

Valores

/* Keyword values */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

Valores

/* Keyword values */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

Style	Preview
text-transform: none;	Lorem ipsum
text-transform: uppercase;	Lorem ipsum
text-transform: lowercase;	Lorem ipsum
text-transform: capitalize;	Lorem ipsum

Font shorthand

MDN

Value: [ [ <font-style> || <font-variant> || <font-weight> || <font-stretch> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar

<font-stretch> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
<font-variant> = nomral | small-caps

Valores

/* `<font-size>` `<font-family>` */
font: 80% sans-serif;
 
/* `<font-style>` `<font-size>` `<font-family>` */
font: italic 1.5rem sans-serif;
 
/* `<font-style>` `<font-weight>` `<font-size>` `<font-family>` */
font: italic bold 1.5rem sans-serif;
 
/* `<font-style>` `<font-weight>` `<font-size>`/`<line-height>` `<font-family>` */
font: italic bold 1.5rem/1.5 sans-serif;
 
/* `<font-style>` `<font-variant>` `<font-weight>` `<font-size>`/`<line-height>` `<font-family>` */
font: italic small-caps bold 1.5rem/1.5 sans-serif;

Valores

/* `<font-size>` `<font-family>` */
font: 80% sans-serif;
 
/* `<font-style>` `<font-size>` `<font-family>` */
font: italic 1.5rem sans-serif;
 
/* `<font-style>` `<font-weight>` `<font-size>` `<font-family>` */
font: italic bold 1.5rem sans-serif;
 
/* `<font-style>` `<font-weight>` `<font-size>`/`<line-height>` `<font-family>` */
font: italic bold 1.5rem/1.5 sans-serif;
 
/* `<font-style>` `<font-variant>` `<font-weight>` `<font-size>`/`<line-height>` `<font-family>` */
font: italic small-caps bold 1.5rem/1.5 sans-serif;

Style	Preview
font: 80% sans-serif;	Lorem ipsum dolor
font: italic 1.5rem sans-serif;	Lorem ipsum dolor
font: italic bold 1.5rem sans-serif;	Lorem ipsum dolor
font: italic bold 1.5rem/1.8 sans-serif;	Lorem ipsum dolor
font: italic small-caps bold 1.5rem/1.8 sans-serif;	Lorem ipsum dolor

Text drop shadows

Valores

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
 
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
 
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
 
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
 
/* offset-x | offset-y */
text-shadow: 5px 10px;
 
/* Global values */
text-shadow: unset;

Valores

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;
 
/* color | offset-x | offset-y | blur-radius */
text-shadow: #fc0 1px 0 10px;
 
/* offset-x | offset-y | color */
text-shadow: 5px 5px #558abb;
 
/* color | offset-x | offset-y */
text-shadow: white 2px 5px;
 
/* offset-x | offset-y */
text-shadow: 5px 10px;
 
/* Global values */
text-shadow: unset;

Simple shadow

Style	Preview
text-shadow: unset;	Lorem ipsum
text-shadow: 1px 1px 2px black;	Lorem ipsum
text-shadow: 10px 1px 2px black;	Lorem ipsum
text-shadow: 1px 11px 2px black;	Lorem ipsum
text-shadow: 1px 11px .5px black;	Lorem ipsum
color: rgba(0,168,255,0.5); text-shadow: 2px -1px 0 rgba(255,0,180,0.5);	Lorem ipsum

Multiple shadow

Fonte: O surpreendente text-shadow

text-shadow

/codes/css/text-style/text-shadow/index.html

<p class="shadow">Lorem</p>

/codes/css/text-style/text-shadow/index.html

<p class="shadow">Lorem</p>

/codes/css/text-style/text-shadow/css/style.css

.shadow {
  color: #f74646;
  font-weight: bolder;
  font-size: 6em;
  text-shadow: -2px 0 0 #fff, -1px -1px 0 #fff, 0 -2px 0 #fff, 1px -1px 0 #fff,
    2px 0 0 #fff, 1px 1px 0 #fff, 0 2px 0 #fff, 12px 16px 0 #00ac94;
}

/codes/css/text-style/text-shadow/css/style.css

.shadow {
  color: #f74646;
  font-weight: bolder;
  font-size: 6em;
  text-shadow: -2px 0 0 #fff, -1px -1px 0 #fff, 0 -2px 0 #fff, 1px -1px 0 #fff,
    2px 0 0 #fff, 1px 1px 0 #fff, 0 2px 0 #fff, 12px 16px 0 #00ac94;
}

Fonte: CSS Text Effects From CodePen

text-shadow-long

/codes/css/text-style/text-shadow-long/index.html

<p class="long-shadow">Lorem</p>

/codes/css/text-style/text-shadow-long/index.html

<p class="long-shadow">Lorem</p>

/codes/css/text-style/text-shadow-long/css/style.css

.long-shadow {
  font-size: 4rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffd9;
  text-shadow: #03a488 1px 1px, #05a488 2px 2px, #08a588 3px 3px, #0aa688 4px
      4px, #0da788 5px 5px, #0fa788 6px 6px, #12a887 7px 7px, #14a987 8px 8px,
    #17a987 9px 9px, #1aaa87 10px 10px, #1cab87 11px 11px, #1fac87 12px 12px,
    #21ac87 13px 13px, #24ad87 14px 14px, #26ae87 15px 15px, #29ae87 16px 16px,
    #2baf87 17px 17px, #2eb087 18px 18px, #30b086 19px 19px, #33b186 20px 20px,
    #36b286 21px 21px, #38b386 22px 22px, #3bb386 23px 23px, #3db486 24px 24px,
    #40b586 25px 25px, #42b586 26px 26px, #45b686 27px 27px, #47b786 28px 28px,
    #4ab886 29px 29px, #4db886 30px 30px, #4fb986 31px 31px, #52ba85 32px 32px,
    #54ba85 33px 33px, #57bb85 34px 34px, #59bc85 35px 35px, #5cbd85 36px 36px,
    #5ebd85 37px 37px, #61be85 38px 38px, #63bf85 39px 39px, #66bf85 40px 40px,
    #69c085 41px 41px, #6bc185 42px 42px, #6ec285 43px 43px, #70c284 44px 44px,
    #73c384 45px 45px, #75c484 46px 46px, #78c484 47px 47px, #7ac584 48px 48px,
    #7dc684 49px 49px, #80c784 50px 50px, #82c784 51px 51px, #85c884 52px 52px,
    #87c984 53px 53px, #8ac984 54px 54px, #8cca84 55px 55px, #8fcb84 56px 56px,
    #91cb83 57px 57px, #94cc83 58px 58px, #96cd83 59px 59px, #99ce83 60px 60px,
    #9cce83 61px 61px, #9ecf83 62px 62px, #a1d083 63px 63px, #a3d083 64px 64px,
    #a6d183 65px 65px, #a8d283 66px 66px, #abd383 67px 67px, #add383 68px 68px,
    #b0d482 69px 69px, #b3d582 70px 70px, #b5d582 71px 71px, #b8d682 72px 72px,
    #bad782 73px 73px, #bdd882 74px 74px, #bfd882 75px 75px, #c2d982 76px 76px,
    #c4da82 77px 77px, #c7da82 78px 78px, #c9db82 79px 79px, #ccdc82 80px 80px,
    #cfdd82 81px 81px, #d1dd81 82px 82px, #d4de81 83px 83px, #d6df81 84px 84px,
    #d9df81 85px 85px, #dbe081 86px 86px, #dee181 87px 87px, #e0e181 88px 88px,
    #e3e281 89px 89px, #e6e381 90px 90px, #e8e481 91px 91px, #ebe481 92px 92px,
    #ede581 93px 93px, #f0e680 94px 94px, #f2e680 95px 95px, #f5e780 96px 96px,
    #f7e880 97px 97px, #fae980 98px 98px, #fce980 99px 99px, #ffea80 100px 100px,
    #00a388 0px 0px;
}

/codes/css/text-style/text-shadow-long/css/style.css

.long-shadow {
  font-size: 4rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #ffffd9;
  text-shadow: #03a488 1px 1px, #05a488 2px 2px, #08a588 3px 3px, #0aa688 4px
      4px, #0da788 5px 5px, #0fa788 6px 6px, #12a887 7px 7px, #14a987 8px 8px,
    #17a987 9px 9px, #1aaa87 10px 10px, #1cab87 11px 11px, #1fac87 12px 12px,
    #21ac87 13px 13px, #24ad87 14px 14px, #26ae87 15px 15px, #29ae87 16px 16px,
    #2baf87 17px 17px, #2eb087 18px 18px, #30b086 19px 19px, #33b186 20px 20px,
    #36b286 21px 21px, #38b386 22px 22px, #3bb386 23px 23px, #3db486 24px 24px,
    #40b586 25px 25px, #42b586 26px 26px, #45b686 27px 27px, #47b786 28px 28px,
    #4ab886 29px 29px, #4db886 30px 30px, #4fb986 31px 31px, #52ba85 32px 32px,
    #54ba85 33px 33px, #57bb85 34px 34px, #59bc85 35px 35px, #5cbd85 36px 36px,
    #5ebd85 37px 37px, #61be85 38px 38px, #63bf85 39px 39px, #66bf85 40px 40px,
    #69c085 41px 41px, #6bc185 42px 42px, #6ec285 43px 43px, #70c284 44px 44px,
    #73c384 45px 45px, #75c484 46px 46px, #78c484 47px 47px, #7ac584 48px 48px,
    #7dc684 49px 49px, #80c784 50px 50px, #82c784 51px 51px, #85c884 52px 52px,
    #87c984 53px 53px, #8ac984 54px 54px, #8cca84 55px 55px, #8fcb84 56px 56px,
    #91cb83 57px 57px, #94cc83 58px 58px, #96cd83 59px 59px, #99ce83 60px 60px,
    #9cce83 61px 61px, #9ecf83 62px 62px, #a1d083 63px 63px, #a3d083 64px 64px,
    #a6d183 65px 65px, #a8d283 66px 66px, #abd383 67px 67px, #add383 68px 68px,
    #b0d482 69px 69px, #b3d582 70px 70px, #b5d582 71px 71px, #b8d682 72px 72px,
    #bad782 73px 73px, #bdd882 74px 74px, #bfd882 75px 75px, #c2d982 76px 76px,
    #c4da82 77px 77px, #c7da82 78px 78px, #c9db82 79px 79px, #ccdc82 80px 80px,
    #cfdd82 81px 81px, #d1dd81 82px 82px, #d4de81 83px 83px, #d6df81 84px 84px,
    #d9df81 85px 85px, #dbe081 86px 86px, #dee181 87px 87px, #e0e181 88px 88px,
    #e3e281 89px 89px, #e6e381 90px 90px, #e8e481 91px 91px, #ebe481 92px 92px,
    #ede581 93px 93px, #f0e680 94px 94px, #f2e680 95px 95px, #f5e780 96px 96px,
    #f7e880 97px 97px, #fae980 98px 98px, #fce980 99px 99px, #ffea80 100px 100px,
    #00a388 0px 0px;
}

Text layout

Text Alignment

MDN

Values: start | end | left | right | center | justify | match-parent

Valores

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

Valores

/* Keyword values */
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: start;
text-align: end;
text-align: match-parent;

Style	Preview
text-align: left;	Lorem ipsum dolor amet, consectetur.
text-align: center;	Lorem ipsum dolor amet, consectetur.
text-align: right;	Lorem ipsum dolor amet, consectetur.
text-align: justify;	Lorem ipsum dolor amet, consectetur.

Text indent

MDN

Values: <length-percentage>

<length-percentage> = <length> | <percentage>

Valores

/* <length> values */
text-indent: 3mm;
text-indent: 40px;
 
/* <percentage> value
   relative to the containing block width */
text-indent: 15%;

Valores

/* <length> values */
text-indent: 3mm;
text-indent: 40px;
 
/* <percentage> value
   relative to the containing block width */
text-indent: 15%;

Style	Preview
text-indent: 3rem;	Lorem ipsum dolor amet, consectetur.
text-indent: 20px;	Lorem ipsum dolor amet, consectetur.

Line height

MDN

Value: normal | <number> | <length> | <percentage>

Valores

/* Keyword value */
line-height: normal;
 
/* <number> values */
line-height: 3.5;
 
/* <length> values */
line-height: 3em;
 
/* <percentage> values */
line-height: 34%;

Valores

/* Keyword value */
line-height: normal;
 
/* <number> values */
line-height: 3.5;
 
/* <length> values */
line-height: 3em;
 
/* <percentage> values */
line-height: 34%;

Style	Preview
line-height: normal;	Lorem ipsum dolor amet, consectetur.
line-height: 3;	Lorem ipsum dolor amet, consectetur.
line-height: 3em;	Lorem ipsum dolor amet, consectetur.
line-height: 300%;	Lorem ipsum dolor amet, consectetur.

Letter spacing

MDN

Value: normal | <length>

Valores

/* Keyword value */
letter-spacing: normal;
 
/* <length> values */
letter-spacing: 0.3em;

Valores

/* Keyword value */
letter-spacing: normal;
 
/* <length> values */
letter-spacing: 0.3em;

Style	Preview
letter-spacing: normal;		Lorem ipsum dolor amet, consectetur.
letter-spacing: 0.1em;		Lorem ipsum dolor amet, consectetur.
letter-spacing: 0.2em;		Lorem ipsum dolor amet, consectetur.

Word spacing

MDN

Value: normal | <length> | <percentage>

Valores

/* Keyword value */
word-spacing: normal;
 
/* <length> values */
word-spacing: 0.3em;
 
/* <percentage> values */
word-spacing: 110%;

Valores

/* Keyword value */
word-spacing: normal;
 
/* <length> values */
word-spacing: 0.3em;
 
/* <percentage> values */
word-spacing: 110%;

Style	Preview
word-spacing: normal;		Lorem ipsum dolor amet, consectetur.
word-spacing: 0.1em;		Lorem ipsum dolor amet, consectetur.
word-spacing: 1em;		Lorem ipsum dolor amet, consectetur.

Hyperlink

State	Selector	Style	Preview
Unvisited	`:link`	color: rgb(0, 0, 238);	link
Visited	`:visited`	color: rgb(85, 26, 139);	link
Hover	`:hover`	cursor: pointer;	link
Focus	`:focus`	outline: rgb(59, 153, 252) auto 5px;	link
Active	`:active`	color: rgb(238, 0, 0);	link

Properties: color, cursor, outline, text-decoration

hyperlink-state

/codes/css/text-style/hyperlink-state/index.html

<p>
  Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit.
  Atque perspiciatis, quae non <a href="#">temporibus</a>, ipsum eos velit
  blanditiis tenetur quibusdam doloribus corporis minus autem illo earum
  delectus nihil at dicta reiciendis.
</p>

/codes/css/text-style/hyperlink-state/index.html

<p>
  Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipisicing elit.
  Atque perspiciatis, quae non <a href="#">temporibus</a>, ipsum eos velit
  blanditiis tenetur quibusdam doloribus corporis minus autem illo earum
  delectus nihil at dicta reiciendis.
</p>

/codes/css/text-style/hyperlink-state/css/style.css

a {
  outline: none;
  text-decoration: none;
}
 
a:link {
  color: #2bdfbb;
}
 
a:visited {
  color: #156f5d;
}
 
a:active {
  color: #df2b4f;
}
 
a:hover,
a:active,
a:focus {
  text-decoration: underline;
}

/codes/css/text-style/hyperlink-state/css/style.css

a {
  outline: none;
  text-decoration: none;
}
 
a:link {
  color: #2bdfbb;
}
 
a:visited {
  color: #156f5d;
}
 
a:active {
  color: #df2b4f;
}
 
a:hover,
a:active,
a:focus {
  text-decoration: underline;
}

Editar esta página

Estilo de Texto

Text, Font

Color

Font family

Font size

Font style

Font weight

Text decoration

Text transform

Font shorthand

Text drop shadows

Text layout

Text Alignment

Text indent

Line height

Letter spacing

Word spacing

Hyperlink