homepage Welcome to WebmasterWorld Guest from 23.20.196.179
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library : Charter : Moderator: open

CSS Forum

    
CSS to handle new Vista fonts and also XP fonts
what are the equivalents?
j_h_maccann




msg:3236473		 10:19 pm on Jan 29, 2007 (gmt 0)

Now that Windows Vista is shipping, browsers (in both IE and FF) will be viewing webpages using the new fonts shipped with Vista and with Office2007--mostly the "C" fonts, such as Calibri, Candara, Consolas, et al. which are the Office2007 document defaults, plus the new 'Segoe UI' font used for captions and headings.

I just went through the CSS for a website, searching for all the places where I set "font-face" and extending the list of fonts to include the appropriate new Vista font in first position. This way, Vista and Office2007 users (who will have both Vista and XP fonts) will see the new fonts to match the defaults in the new apps, and XP and Office2003 users will still get the older fonts with no change.

I found it somewhat difficult to choose new Vista fonts which were close enough to XP fonts so that the same font-size, font-weight, and div measurements were good for both sets of fonts. I was tempted to scale the Vista font sizes up a bit--but that would have made the XP fonts too large. In particular, I couldn't find anything similar to Verdana (when all the rest of the CSS was left unchanged).

Is there a table of equivalences to use in making this adjustment?

P.S. You can download the new fonts for free now from Microsoft (along with Office file format converters) to use them on WinXP:

Microsoft Office Compatibility Pack
for Word, Excel, and PowerPoint 2007 file formats [office.microsoft.com]

The Compatibility Pack installer .exe will install the new fonts into your WinXP along with convertors to/from the new XML document formats.

 

SuzyUK




msg:3240568		 11:46 am on Feb 2, 2007 (gmt 0)

Is there a table of equivalences to use in making this adjustment?

honestly I don't know, doesn't the generic font-family (which should be at the end of the list of CSS choices anyway) cover any differences and are you saying that verdana is not available in Vista?

j_h_maccann




msg:3245337		 4:24 pm on Feb 7, 2007 (gmt 0)

Verdana is certainly shipped in WinVista, but the new "cleartype collection fonts" are the new standard; they look much better, they are used in the operating system, and they are the default fonts for documents created in Office2007--so webpages that do not list the newer fonts as first choices in font families will run the risk of looking old-fashioned in Vista.

The problem is that when I specified a font family as

body {font:normal 100.01%/1.6 Candara,Verdana,Arial,'Lucida Grande',sans-serif;}

the Candara (new Vista font) looks smaller at the same size than does the Verdana (old XP font). I almost need to specify different sizes for different fonts, unless I'm using the wrong equivalences. (I'm looking at the same webpage with the same CSS on two machines side by side, both running WinXP, one with the new fonts installed and one without.)

Michael Kaplan has given a list of what he calculates are "the 290mb and over 712,000 glyphs contained in the Vista fonts":

Core Fonts:
Arial
Courier New
Times New Roman
Symbol
Wingdings

Core UI Fonts:
Microsoft Sans Serif
Segoe UI
Tahoma

ClearType Collection Fonts:
Calibri
Cambria
Candara
Consolas
Constantias
Corbel

Other Western Fonts:
Arial Black
Franklin Gothic Medium
Georgia
Impact
Lucida Console
Lucida Sans Console
Marlett
Palatino Linotype
Segoe Print
Segoe Script
Trebuchet MS
Verdana
Webdings

East Asian Fonts:
Batang/BatangChe
DFKsi-SB
Dotum/DotumChe
Fangsong
Gulim/GulimChe
Gungsuh/GungsuhChe
KaiTi
Malgun Gothic
Meiryo
Microsoft JhengHei
Microsoft YaHei
MingLiU_HKSCS/MingLiU_HKSCS-ExtB
MingLiU-ExtB/PMingLiU-ExtB
MS Gothic/MS PGothic/MS UI Gothic
MS Mincho/MS PMincho
SimHei
Simsun/NSimsun
SimSun-ExtB

Arabic Fonts:
Andalus
Arabic Typesetting
Microsoft Uighur
Simplified Arabic
Traditional Arabic

Hebrew Fonts:
Aharoni Bold
David
FrankRuehl
Gisha
Levenim
Miriam
Narkisim
Rod

Thai Fonts:
Angsana New/AngsanaUPC
Browallia New/BrowalliaUPC
Cordia New/CordiaUPC
DilleniaUPC
EucrosiUPC
FreesiaUPC
IrisUPC
JasmineUPC
KodchiangUPC
Leelawadee
LilyUPC

Indic Fonts:
Gautami
Iskoola Pota
Kalinga
Kartika
Latha
Mangal
Raavi
Shruti
Tunga
Vrinda

Other Fonts:
DaunPenh
DokChampa
Estrangelo Edessa
Euphemia
Microsoft Himalaya
Microsoft Yi Baiti
Mongolian Baiti
MV Boli
Nyala
Plantagenet Cherokee
Sylfaen

(I'll repeat that the new Vista fonts work on Windows XP, and they are available free from Microsoft as part of the "Office Compatibility Pack" linked above from the original posting, so anyone can preview Vista fonts in webpages while still using XP.)

Fotiman




msg:3245363		 4:39 pm on Feb 7, 2007 (gmt 0)

I would recommend AGAINST using Verdana. It's a much larger font than other's in it's generic family.
Ingolemo




msg:3245399		 5:04 pm on Feb 7, 2007 (gmt 0)

The problem with different fonts showing up as different sizes could potentially be solved by using the CSS property font-size-adjust. It's not supported on everything but those that do support it will see the improvements.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved