As I’m a mainlander Chinese, I can only speak for those computers and browsers who live in central P.R.China.
If you are making a design for or in Mandarin Chinese, especially Simplified Chinese, beside those common English web safe fonts such as Arial and Verdana shipped in MS Windows by default that 95% mainlander Chinese rely on, you can specify font-family in CSS by the following typefaces for Chinese characters, they are totally safe across all Chinese browsers:
- 宋体, mostly used for large chunks of paragraphs in small font sizes.
- 黑体, works out well in either headings or paragraphs.
- 幼圆, slender touches and rounded corners, pearl’s way.
- 隶书, renaissance of a rather traditional Chinese brush writing dating thousands of years back, generally modest and conservative with ancient style yet powerful from within.
- 微软雅黑, the new Chinese character font introduced in Vista and with IE7, though not that safe compared with the former 4 in that it’s not automatically included in Chinese localized version of Windows XP, but generally considered as the most elegant and beautiful of the Mandarin Chinese web safe fonts.
I have also made a screenshot of how these fonts look in real Chinese characters in FF2, with normal, bold and italic states for each typeface. The 4 characters is Shakespeare in Chinese in the right column with the name of the font on in the left column.
{ 1 trackback }
{ 16 comments… read them below or add one }
What are the name of these fonts?
@DNS – If you intend to use one of them for Chinese texts, you’ll have to specify them in CSS in Chinese, because the font names are in Chinese.
In the picture I put up, texts in the left column are the name of that font used for the particular Shakespeare on the right.
Thanks for posting this Yang Yang – it is just what I am looking for! I am also looking for example of nice typography using hanyu – do you have any sites that you would recommend ?
@Dave Rutter – Glad helped out. :)
Well, let me give you a few renowned web design agencies and communities in mainland China if you don’t know any of them yet:
1. http://www.chen-design.com – A Beijing based big design studio who has designed fairly a few national government websites. Their portfolio: http://www.chen-design.com/client.htm
2. http://www.reeyee.cn – A Nanjing based web design company focusing primarily on SMB and enterprise internet marketing services. Their portfolio: http://www.reeyee.cn/case.php
3. http://www.blueidea.com – Currently the largest community for Web design in mainland China. It has a forum at here: http://bbs.blueidea.com
Might get what you need in their portfolio section.
Unlike English websites who have a relatively wide array of available typographical options, due to a lack of good common typefaces, Chinese web designers are doomed with a very limited number of fonts in which, 宋体 is undoubtedly used for more than 95% of the texts on any Chinese website. Even the design agencies you see above use 宋体 for almost all of its Chinese characters (search their css file under GBK encoding for ‘宋体’). One thing noteworthy is that no matter what English fonts you have specified with font-family, such as ‘Arial’, the typeface will always fall back on ‘宋体’ by default if there’s any Chinese characters inside the selector.
Images or sIFR is the only ways to diversify Chinese website typography which are rarely used from what I’ve seen so far, except for headings that need to stand out.
Thanks again! It’s a same that the fonts are so limited for such a beautiful language. I prefer not to use images or sIFR as I prefer to use text as it is better for search engines.
I’ll let you know what I come up with when I do start doing the site.
@Dave – Can’t wait to see what you are doing. ;)
Thanks for introducing font-family for Chinese characters. I am facing another problem for web content with Chinese and English characters:
In reason of multilingual, I’m using “Arial” for the web content. It looks good, but it will be better if there is letter-spacing between each Chinese character. But this will effect English characters like email address displaying in the content.
It is irritating if I set a letter-spacing in body style, but add a tag one by one to those English words. I have tried inter-ideograph and inter-word, but it shows no effect in both Firefox and IE browser.
Do you have any solution on this?
@Ching
I tested a mixed string of Chinese characters and English email addresses and the letter-spacing property works fine for me. All the characters including both the Chinese ones and the English ones are evenly spaced from each other. Did you mean to apply letter-spacing to only English characters but not Chinese ones?
Hi all,
Can you tell me where can I download those fonts, I have a English version of Windows XP
Regards.
@rraallvv,
I have posted a download link where you can download these fonts now:
http://www.kavoir.com/2009/06/download-web-safe-simplified-chinese-fonts-song-ti-hei-ti-youyuan-lishu-ms-ya-hei.html
I had problems copying and pasting the chinese font names, so if anyone else is struggling with that: Use a text editor which is capable of displaying chinese fonts, e.g.: http://www.jext.org/
Yang Yang: Thank you for the web safe fonts. :)
If you are using Windows, try installing this Chinese language patch first: http://www.microsoft.com/downloads/details.aspx?familyid=DEB6731A-CA36-47A3-B4A0-2A1D19EEFA05&displaylang=en
It’ll help your system display Chinese characters correctly so you can copy and paste them.
Quote: Well, let me give you a few renowned web design agencies and communities in mainland China if you don’t know any of them yet:
You forgot to add http://www.petralian.com ;-)
Would you mind showing a snippet of CSS that would prefer the brushed style fonts, but fall back on the blocky ones if not available? I’d like it to look good on Windows XP/7/Mac/Linux (English) and able to be anti-aliased. I know that is a tall order, sorry about that.
What I’m trying to accomplish is to have a large character symbolizing the main idea of my blog post. It is working ok so far, but I get blocky characters instead of the ones with a brushed style and a bit out of my league here. ;)
My first stab:
ideograph {
font-size: 10em;
font-family: “隶书”, “宋体”, Arial;
}
If it’s just one large Chinese character you need, I’d suggest an image instead of real text. I’ve no idea what you mean by brushed style fonts or blocky, but typeface anti-aliasing differs browser to browser, on some browsers, it’s well anti-aliased while on others, it’s not. It also depends largely on the font-size you use, at some sizes it looks well anti-aliased but at others it doesn’t.
The CSS snippet you posted, is ‘ideograph’ a tag or class? Looks like a class to me so shouldn’t there be a dot before it?
Hi, I’m trying to avoid using images if I can, as the fonts are looking good and save time. I’m using blogger and graphics are a big pain in the butt.
Yes, about the dot, it was a typo.
Brushed vs. Blocky. I’m referring to the style of #4 which you describe as “brush writing.” I’d describe my previous results as “blocky,” with very thick straight lines, similar to the bold version of #5 above.
Thanks for your help.