CSS Typografie
CSS Typografie
css-eigenschappen color opacity font-size line-height font-style font-weight text-align text-decoration text-indent letter-spacing text-transform
color
Tekstkleur
p {
color: red;
}opacity
Ondoorschijnbaarheid
p {
/* 50% doorzichtig */
opacity: 0.5;
}font-size
Tekengrootte (rem is aangeraden)
line-height
Regelhoogte
(zonder eenheid is aangeraden)
p {
font-size: 1rem;
line-height: 1.5;
}font-style
Gebruik een variant van de gevonden font.
.special {
font-style: italic;
}
.another-one {
font-style: oblique;
}font-weight
Kiest het dikte van het lettertype.
.special {
font-weight: bold;
}
text-align
Het aligneren van text.
text-decoration
text-indent
Enkele manieren om tekst te decoreren.
Letter-spacing
letterspatiëring
text-transform
Transformeren van letters tussen lowercase en uppercase
Media queries
Media queries
Media queries worden gebruikt om vanuit CSS een onderscheid te kunnen maken om conditioneel stijl toe te passen in bepaalde scenarios.
Conceptueel: Als [media-query] dan [CSS].
Media queries
h1 {
text-align: left;
}
@media(min-width: 20rem) {
h1 {
text-align: center;
}
}Als scherm breder is dan 20rem, mag de text in het midden uitgelijnd worden.
Media queries
h1 {
color: black;
}
@media(min-width: 20rem) {
h1 {
color: blue;
}
}
@media(min-width: 50rem) {
h1 {
color: yellow;
}
}Als het scherm tussen 20rem en 50rem is, zal de "h1" blauw zijn
Media queries
h1 {
color: black;
}
@media(min-width: 20rem) {
h1 {
color: blue;
}
}
@media(min-width: 50rem) {
h1 {
color: yellow;
}
}CSS wordt gelezen van boven naar onder, in een mobile-first principe start je dus steeds vanaf mobile!
Gebruik ook
uitsluitend
"min-width"!
What the font?
Wat is een font?
1 font = 1 bepaald lettertype in 1 bepaalde stijl:
bv: Roboto Light
Wat is een font?
één font heeft een hele hoop tekens:
- Iedere letter van het alphabet (a - Z)
- Ieder nummer (0 tot 9)
- Lettertekens (; , . ? / >)
- Lettervariaties (é ê ë ē ę è ž, ...)
Wat is een font?
Die tekens kan je gaan categoriseren volgens subsets
- Alle Griekse tekens
- Alle Latijnse tekens
- Alle cijfers
- ...
Fonts gebruiken
font-family property (Lettertype)
De webpagina zal nu proberen het Verdana font te laden en indien dit font niet gevonden wordt op de computer, zal vervolgens Arial ingeladen proberen worden = fallback
html {
font-family: Verdana, Arial, sans-serif;
}Fonts gebruiken
Verschil per besturingssysteem.
Welke fonts beschikbaar?
OSX (Apple): 198 fonts
Windows (Microsoft): 440 fonts
Fonts gebruiken
Design zal altijd een specifieke font verwachten, bijvoorbeeld: "Lato".
Maar wat doe je als die font niet bestaat op een gebruiker hun systeem?
html {
font-family: "Lato", Arial, Helvetica, sans-serif;
}Fonts gebruiken
1. Download de fonts en plaats ze in een mapje naast je index.html
Gratis: Google fonts (+ Font squirrel)
Betalend: Fonts.com, ...
Fonts gebruiken
Selecteer enkel de variaties van de font dat je zal gebruiken!
Bijvoorbeeld:
- regular
- italic
- black
Fonts gebruiken
Je kan Google Fonts toevoegen met een CDN (content delivery network)
html {
font-family: 'Roboto', sans-serif;
}
...
<head>
...
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
...
</head>Fonts gebruiken
We kunnen ook de verantwoordelijkheid van het hosten van onze fonts zelf in handen nemen.
Zelf hosten van fonts zal onze pagina sneller doen laden en laat ons toe om hier nog subsets uit te verwijderen.
Fonts gebruiken
Dan stuur je de fonts mee!
@font-face {
font-family: "Lato";
src: url('fonts/lato.woff2') format('woff2'),
url('fonts/lato.woff') format('woff');
}
html {
font-family: "Lato", Arial, Helvetica, sans-serif;
}@font-face {
font-family: "Lato";
src: url('fonts/lato.woff2') format('woff2'),
url('fonts/lato.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Lato";
src: url('fonts/lato--bold.woff2') format('woff2'),
url('fonts/lato--bold.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Lato";
src: url('fonts/lato--italic.woff2') format('woff2'),
url('fonts/lato--italic.woff') format('woff');
font-weight: normal;
font-style: italic;
}
html {
font-family: "Lato", Arial, Helvetica, sans-serif;
font-weight: normal;
font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
}
em {
font-style: italic;
}Font gebruiken
CSS Fonts
By Frederick Roegiers
CSS Fonts
CSS Kleur, CSS-eenheden, CSS eigenschappen: tekst, fonts.
