Tag: Fonts

Categories
CSS

CSS fonts and text formatting

  • text-decoration: underline (or none to remove it, or overline to strike it out)
  • text-decoration: blink; alternative to deprecated tag <blink>
  • letter-spacing: 10px (controls the distance between letters)
  • word-spacing: 10px (controls the distance between words, negative numbers will overlap words)
  • line-height: 1.5; (equivalent to saying 150% of the normal line size)
  • text-align: center; or left, right, justified (space between words vary slightly to make the end of line more uniform)
  • text-indent: 25px; Indenting the first line of text:

@font-face allows you to use external files to install and use fonts on the fly.

The syntaxis is a bit hacky, in order to get it right it may be easier for you to use the following resource:

http://www.fontsquirrel.com/fontface/generator

But it goes something like this:
@font-face {
font-family: ‘Tagesschrift’;
src: url(‘tagesschrift.eot’); /* IE 5-8 */
src: local(‘☺’), /* sneakily trick IE */
url(‘tagesschrift.woff’) format(‘woff’), /* FF 3.6, Chrome 5, IE9 */
url(‘tagesschrift.ttf’) format(‘truetype’), /* Opera, Safari */
url(‘tagesschrift.svg#font’) format(‘svg’); /* iOS */
}

Here are some services offering font faces:

http://www.fontsquirrel.com/

http://www.google.com/webfonts

https://typekit.com/

http://fontdeck.com/

Categories
CSS

Specify font size with CSS

  • Pixel specified (px). The disadvantage is that IE 6 won’t resize it when font display size is set (accessibility issue)
  • Percentage
  • Keyword (small, extra-small, etc)
  • em
Categories
CSS Fonts HTML

Fonts

So the way it works is: in CSS, you specify a font family, then at the end you specify a generic family, so in case the computer you are using don’t have the font family installed, it will fall back to the default generic family at the end.

Generic families are: Serif, Sans-serif and monospace.

Example of use is: p{font-family:”Times New Roman”, Times, serif;}

Serif fonts

  • Times, Times New Roman, Georgia

Sans-serif fonts

  • Sans means “without”, meaning they don’t have the little hitches
  • On computer screens, these are the easier to read ones
  • Often used for headlines
  • Clean and simple apperance
  • Arial, Helvetica, Vendana, Formata

Monospaced fonts

  • Used to display computer code
  • Courier New, Courier, monospace

When you use italics or bold font variations and they don’t look good, it is usually because you are using a @font-face, and you don’t have the bold and italics variations for them to look good. So the browser is doing an effort to create an italic or bold version of what it has. And sometimes it fails spectacularly. Stop using font faces that don’t have the bold or italic variations you need, or use a font family that includes those already.