Difference between revisions of "Courses/Design & Technique-Essential Web Design/05"

From Publication Station
 
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
#REDIRECT [[Courses/Design & Technique-Essential Web Design/CSS4print]]
 
=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.
* Sans­serif
* 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]

Latest revision as of 11:34, 10 October 2018

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. 

p::first-of-type {
  font-size: 14pt;
  font-wieght:bold;
}


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

p::first-letter {
  font-weight: bold;
  color: red;
}


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

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


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.

  • Sans­serif
  • 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>

Open-source 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>


References

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/05&oldid=7098’