Difference between revisions of "Courses/Design & Technique-Essential Web Design/05"
| Line 82: | Line 82: | ||
== use a custom font == | == use a custom font == | ||
To use a custom font, the font file has to be stored somewhere, either '''locally''' (same folder as your site). | To use a custom font, the font file has to be stored somewhere, either '''locally''' (same folder as your site) or remotely. | ||
=== locally == | |||
* download a font from: https://fontlibrary.org/ | |||
* save the font files (.ttf .woff) on your website folder, best in a folder dedicate to fonts | |||
* write the CSS @font-face rules for each of the fonts and font files | |||
Try changing the following example with other custom font | |||
In this case I'll use 5by7 https://fontlibrary.org/en/font/5by7 which includes 2 styles: regular and bold. | |||
Notice how 2 font sources (files) are used under the same font name, but with different weight, so that both the regular and bold font-styles are used. | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<!DOCTYPE html> | |||
<html> | <html> | ||
<head> | <head> | ||
<style type="text/css"> | |||
@font-face { | |||
font-family: " | font-family: "5by7"; | ||
src: url("fonts/ | src: url("fonts/5by7.ttf"); | ||
font-weight: normal; | |||
font-style: normal; | |||
} | |||
@font-face { | |||
font-family: "5by7"; | |||
</head> | src: url("fonts/5by7_b.ttf"); | ||
<body> | font-weight: bold; | ||
font-style: normal; | |||
</body> | } | ||
body { | |||
font-size: 16pt; | |||
font-family: "5by7"; } | |||
</style> | |||
</head> | |||
<body> | |||
<h1>This is a custom font in Bold.</h1> | |||
<b>Bold again</b> | |||
<p>Regular font-weight in a paragraph</p> | |||
</body> | |||
</html> | </html> | ||
</source> | </source> | ||
==fonts and licenses== | ==fonts and licenses== | ||
We can use this fonts and even make a commercial (for which we receive money) website, using that font, without paying for the font. | We can use this fonts and even make a commercial (for which we receive money) website, using that font, without paying for the font. | ||
Revision as of 09:50, 4 October 2016
CSS for typography
essential typography properties
- font-size: body in pt, rest of elements in em
- font-height: regular or bold
- font-style
- font-family
- color
- text-align
- line-height
- letter-spacing: increases or decreases the space between characters( negative values are allowed)
- text-shadow
Using fonts
| system fonts | custom fonts |
|---|---|
| ready to use | need to load or upload |
| limited set | broad range |
| change slightly in each user's computer | remain the same to all users |
| too familiar | fresh |
system fonts
System fonts are generic fonts.
- Sansserif
- Serif
- Monospace
- Cursive
system fonts example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
font-size: 10pt;
}
p {font-family: cursive;
font-size: 3em;
}
p.other {font-family: sansserif}
span.yetanother {font-family: monospace}
</style>
</head>
<body>
<p>Cursive generict font</p>
<p class="other">Testig another generic font.
<span class="yetanother">And yet another one</span>
</p>
</body>
</html>
custom fonts
The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. Mozilla @font-face
Web fonts formats
Different font formats exist:
- Web Open Font Format (.woff)
- TrueType/OpenType (.ttf/.otf)
- Scalable Vector Graphics Fonts (.svg)
Currently, most browsers support these font formats, with the exception of .svg, that is only supported by Firefox. See Wikipidia article on Web fonts.
use a custom font
To use a custom font, the font file has to be stored somewhere, either locally (same folder as your site) or remotely.
= locally
- download a font from: https://fontlibrary.org/
- save the font files (.ttf .woff) on your website folder, best in a folder dedicate to fonts
- write the CSS @font-face rules for each of the fonts and font files
Try changing the following example with other custom font
In this case I'll use 5by7 https://fontlibrary.org/en/font/5by7 which includes 2 styles: regular and bold.
Notice how 2 font sources (files) are used under the same font name, but with different weight, so that both the regular and bold font-styles are used.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@font-face {
font-family: "5by7";
src: url("fonts/5by7.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "5by7";
src: url("fonts/5by7_b.ttf");
font-weight: bold;
font-style: normal;
}
body {
font-size: 16pt;
font-family: "5by7"; }
</style>
</head>
<body>
<h1>This is a custom font in Bold.</h1>
<b>Bold again</b>
<p>Regular font-weight in a paragraph</p>
</body>
</html>
fonts and licenses
We can use this fonts and even make a commercial (for which we receive money) website, using that font, without paying for the font.
It is not because the font is free (of charge), but because they are open.
They are released under a SIL Open Font License (OPF).
SIL license
http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web
License:
- allows fonts to be used, studied, modified and redistributed freely.
- fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software.
- fonts and derivatives, however, cannot be released under any other type of license.
- requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
Apache license
http://www.fontsquirrel.com/fonts/sinkin-sans
open fonts libraries
remote custom fonts
It is possible to use custom fonts, that are not stored locally, and instead "live" in a service like Google Fonts or Open Font Library.
This method is:
- convenient
- easier
but, on the down-side:
- it takes more time to load the page
- the font can be removed at any point by the service
remote custom font example
Using the font https://fontlibrary.org/en/font/barrio and following the "Use this font" instructions:
<html>
<head>
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/barrio" type="text/css"/>
<style type="text/css">
h1 { font-family: 'BarrioRegular';
font-weight: normal;
font-style: normal;
font-size: 3em;
}
</style>
</head>
<body>
<h1>This is a remote custom font.</h1>
</body>
</html>
Assignment
- find a text or several that you consider interesting;
- place it on a webpage.
- type-set it with CSS, so that the style either illustrates, contradicts, or is in dialog with the content.
Rules:
- use at least a custom font
- make use of CSS essential typography properties
- be bold, be extreme: you can go from a legible and soothing style, to total illegible and cryptic. Most important is that the style responds to the text content. And that you have fun and find out new things while doing it.
Example: http://publicationstation.wdka.hro.nl/go/Alice.html
