We can set the color of text:
p {
color: blue;
}
There are text properties, e.g.:
p {
letter-spacing: 1em;
line-height: 90%;
text-align: right;
text-indent: 1em;
text-transform: uppercase;
word-spacing: 2em;
}
There are text decoration properties, e.g.:
p {
text-decoration: underline;
text-shadow: 2px 1px gray;
}
A large quantity of text might look better if the text is laid out in columns, like in a newspaper.
In CSS, on the container, specify column-width
, e.g.:
column-width: 20em;
You get as many 20em columns as will fit.
<body>
<header>
<h1>Header</h1>
</header>
<main>
<h1>Heading</h1>
<p>
Lots of text
</p>
<figure>
<img src="..." alt="..." />
<figcaption>
Caption
</figcaption>
</figure>
<p>
Lots more text.
</p>
</main>
<footer>
Footer
</footer>
</body>
main {
column-width: 20em;
column-gap: 2em;
column-rule: 1px solid gray;
}
main h1 {
column-span: all;
}
figure {
break-inside: avoid;
}
img {
max-width: 100%;
}
What can we do if a word is too long for its column?
hyphens: manual
on the container;­
inside the word at possible places where it can be hyphenated.
hyphens: auto
on the container;lang
attribute.There are various font properties, e.g.
p {
font-family: "Times New Roman";
font-size: 12px;
font-style: italic;
font-weight: bold;
}
Some fonts are proportional;
others are monospace.
Some fonts have serifs;
others are sans-serif.
font-family
property but give it multiple values (a font stack) to cover
multiple platforms, e.g.:
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
CSS has downloadable fonts.
Use the @font-face
@rule, e.g.
@font-face {
font-family: MuseoSans;
src: url('fonts/museosans-500-webfont.woff2') format('woff2');
}
body {
font-family: MuseoSans, Verdana, Geneva, Tahoma, sans-serif;
}
The browser requests the museosans-500-webfont.woff2
file from the URL.
Think about copyright!
Think about readability!
You can download font files from
https://fontlibrary.org/
https://fonts.google.com/
Flash Of Unstyled Text (FOUT) | Flash Of Invisible Text (FOIT) |
---|---|
the user first sees one of the fallback fonts then, after a delay, the font changes to the downloaded one | the user first sees no text then, after a delay, the text appears using the downloaded font |