FontsLive.com announces enhanced web fonts support to Apple devices with iOS 4.2 software update

FontsLive delivers web fonts to any browser with web font support – whether on desktop or mobile devices. For the past six months we have delivered web fonts to Apple devices with the Safari mobile browser. This includes the iPhone, iPod Touch and iPad.

This past week Apple released the iOS 4.2 software update. This update added support for web fonts in the TrueType format. Previously Apple devices only supported web fonts in the SVG format, which was problematic due to issues with font families containing multiple weights.

Apple devices with web fonts support

Today we updated the FontsLive web font service has to address these improvements in Apple iOS 4.2, and we encourage all users of Apple devices to download this new update.

We are committed to delivering web fonts to as many devices as possible. Android 2.2 supports web fonts, which FontsLive supports. We will continue to expand our service to other mobile devices as they embrace web fonts.

Read more info on FontsLive browser support

New web fonts: Baker Signet & Elephant now available

We are continuing to expand our web fonts catalog and are pleased to announce these new additions:

Baker Signet
Baker Signet was designed by well-known calligrapher Arthur Baker in 1965 for Visual Graphic Corporation (VGC). This version from Paratype includes both Latin and Cyrillic character sets.

Elephant & Elephant Italic
Elephant and Elephant italic were designed by Matthew Carter, one of the most-praised type designers of our time. They are a careful re-working of a traditional English extra-bold serif style and are great for eye-catching headlines.

Font-weight issues with web fonts

The CSS “font-weight” property is used to define the weight of a font, such as regular or bold. This article describes how to best use font families that have extended weights that may range from Extra Light all the way to Extra Black.

Here is how a regular and bold weight would be defined:
   font-weight:normal
   font-weight:bold

But for all other weights a numerical range from 100 to 900 is used. One of the challenges with web fonts is that most web browsers do not properly support font weights other than normal & bold. The following chart describes the possible mappings of weights to the numeric definitions:

• 100    Extra Light or Ultra Light
• 200    Light or Thin
• 300    Book or Demi
• 400    Normal or Regular
• 500    Medium
• 600    Semibold, Demibold
• 700    Bold
• 800    Black, Extra Bold or Heavy
• 900    Extra Black, Fat, Poster or Ultra Black

How FontsLive solves the issues with font-weight

We have solved the font-weight issue with our web font service by allowing you to customize the font-family name for each web font. For example you can create a font-family definition for EndurancePro-Light, and then use the ‘font-weight:normal’ definition (versus ‘font-weight:100’ which does not work properly across all browsers).

You will find the option to customize the font-family name after you have added fonts to a CSS resource in the Web Font Manager in your account.

Here is an example using the Mayberry Pro font family:

{ font-family: "Mayberry Pro Light"; font-weight: normal; }

{ font-family: "Mayberry Pro Medium"; font-weight: normal; }

{ font-family: "Mayberry Pro"; font-weight: normal; }

{ font-family: "Mayberry Pro Semibold"; font-weight: bold; }

{ font-family: "Mayberry Pro Bold"; font-weight: bold; }

{ font-family: "Mayberry Pro Extrabold"; font-weight: bold; }

{ font-family: "Mayberry Pro Black"; font-weight: bold; }

Web Fonts Quality

We often are asked the question of why fonts look different on a Mac vs Windows, or in one web browser compared to another. This article will address the issues of web font quality.

First of all, it is not necessarily the web browser that impacts font quality, but rather the Operating System (OS). The Mac OS has a different font rendering system than Windows. And Windows has three different rendering options that generate different quality results.

We recommend reviewing web fonts in the desired sizes (text/headline) that you will be using in four different rendering modes to judge font quality:

• Mac OS X
• Windows Standard grayscale
• Windows ClearType
• Sub-Pixel ClearType (DirectWrite)

As you can see above there are significant differences in each of these rendering modes.

Mac OS X renders text using sub pixel rendering. This makes type look smooth, which some people prefer but others think is too fuzzy. Also, it can make the font bolder looking than on Windows. Mac OS X does not use the 'hinting' programmed into TrueType fonts, rather it has its own algorithms to render the text on screen.

Windows Standard Grayscale:This is the default setting in Windows XP and uses grayscale antialiasing to smooth the edges of screen fonts. TrueType fonts can be hinted to be optimized for this setting.

Windows ClearType: This uses color pixels to smooth the edges of fonts using subpixel rendering to improve font rendering on LCD screens. ClearType is an option in Windows XP, but is automatically enabled in Windows XP with Internet Explorer 8. ClearType is on by default in in Windows Vista and Windows 7.

Sub-Pixel ClearType is a new text and graphics rendering system in Windows 7, and is also available for Windows Vista SP2. Sub-pixel ClearType uses Windows Direct2D and DirectWrite hardware acceleration to significantly enhances the quality of text by adding y-direction antialiasing. Thus the tops, bottoms and diagonals of characters appear much smoother with Sub-Pixel ClearType. New versions of browsers, including Internet Explorer 9 and FireFox 4 are offering support for Sub-Pixel ClearType.

Here is the most recent data for OS market share from http://gs.statcounter.com:

• WinXP - 53.19%
• Win7 -  22.41%
• WinVista - 16.60%
• Mac OS X - 6.03%

Thus the two most prominent Windows rendering modes today are Standard Grayscale and ClearType. All the fonts on FontsLive are optimized for rendering in Windows using all three rendering modes at their designated size ranges. Fonts in the Text category will look good at text sizes (12 to 24). Fonts in the Headline category will look best at larger sizes (24 on up).

Below are examples of fonts (Bree and Copperplate)  in each of the different rending modes:

---

Mac OS X default rendering:

---

 

Windows - Grayscale rendering:

---

 

Windows - ClearType rendering:

---

 

Windows - Sub-Pixel ClearType rendering:

---

 

Mac OS X default rendering:

---

 

Windows - Grayscale rendering:

---

 

Windows - ClearType rendering:

---

 

Windows - Sub-Pixel ClearType rendering: