Editing Courses/Design & Technique-Essential Web Design/05 (section)

=CSS for typography=

==essential typography properties==
* font-size:  ''body in pt, rest of elements in em''
* font-weight: normal or bold
* font-style: normal or italic
* font-family
* color 
* text-align
* line-height
* letter-spacing: increases or decreases the space between characters( negative values are allowed)
* text-shadow
* text-indent
* column-count: the number of text columns 
* column-width
* text-transform:  uppercase, lowercase

==::first-letter and ::first-line :first-of-type ==
''':first-of-type''' selector in CSS allows you to target the first occurrence of an element within its container. 

<pre>
p::first-of-type {
  font-size: 14pt;
  font-wieght:bold;
}
</pre>


'''p::first-letter''' is a CSS pseudo class that applies to the the first letter of an element

<pre>
p::first-letter {
  font-weight: bold;
  color: red;
}
</pre>


'''p::first-line'''  is a CSS pseudo class that applies to the the first line of an element

<pre>
p::first-letter {
  font-weight: bold;
  color: blue;
   text-transform: uppercase;
}
</pre>


==Using fonts== 
{| class="wikitable" border="1"
|-
! '''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==
<source lang="html4strict">
<!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>
</source>


==custom fonts==
''The @font-face CSS at-rule allows authors to specify online fonts to display text on their web pages.'' [https://developer.mozilla.org/en/docs/Web/CSS/@font-face 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 [https://en.wikipedia.org/wiki/Web_typography#File_formats 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. 

<source lang="html4strict">
<!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>
</source>

==Open-source fonts libraries==
* https://fontlibrary.org
* http://fontsquirrel.com/  
* https://fonts.google.com/

==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:

<source lang="html4strict">
<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>
</source>



==References==
* [https://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/beautiful fonts with @font-face]
* [https://developer.mozilla.org/en/docs/Web/CSS/@font-face Mozilla @fontface]