CSS Tutorial – Font Sizing

css3_logoYou can use Cascading Style Sheets (CSS) is to modify the font or typography of the page. There are several ways to describe font sizes.

In the font-size property, you’ll know that there are many different measurements to use when defining the size of the font.

Relative lengths

  • xx-small through xx-large – relative to the default browser font size
  • percentages – relative to the surrounding text
  • em and ex – relative to the parent element
  • pixels – relative to the screen resolution

Absolute lengths

  • points and picas – print units
  • inches, centimeters, and millimeters – length units

Continue reading “CSS Tutorial – Font Sizing”

Snippet — Custom Fonts Fix

css3_logoFont embedding enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended.

Modern browsers support the W3C standard for custom fonts, WOFF, at http://caniuse.com/#search=wof. WOFF is compressed TrueType/OpenType font that contains information about the font’s source. You can learn more about these at CSS3 Tutorial – Custom Fonts.

But what about earlier browsers?

Continue reading “Snippet — Custom Fonts Fix”

HTML5 Tutorial – SVG Basic Shapes, Viewport, Path, Text, Fonts

image_thumb1SVG is a widely-deployed royalty-free graphics format developed and maintained by the W3C SVG Working Group. It is a language for describing 2D-graphics and graphical applications in XML.

You can find an overview of SVG in our previous post. In this section, you’ll learn about Basic Shapes, Path, Text, and Fonts.

With SVG, you can use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation.

Continue reading “HTML5 Tutorial – SVG Basic Shapes, Viewport, Path, Text, Fonts”

CSS3 Tutorial – Which Style Your Browser Chooses

css3_logoOne of the key features in using Cascading Style Sheets is that you set a style then override it. And you can override just part of the display or all of it. Knowing how a browser chooses and applies your styles is invaluable knowledge.

In the previous post, you learned how you could reset the browser settings. Those settings override the user agent to provide you with a consistent look to start from. The point is that you can override the styles.

Continue reading “CSS3 Tutorial – Which Style Your Browser Chooses”