Category: Fonts & Typography

Categories
China Internet Fonts & Typography

Download Web Safe Simplified Chinese Fonts: Song Ti, Hei Ti, Youyuan, Lishu, MS Ya Hei

As requested by a reader of Make A Website that wants to know where to download web safe chinese fonts. I have now packaged them in a ZIP for download in case any more of you wants to use them for Chinese web projects.

Click to download the fonts.
No more download of fonts because of potential copyright infringement – you may google search and download them directly from Microsoft or other sites instead:

– Microsoft YaHei
– Microsoft YaHei Bold
– SimSun, NSimSun
– SimHei
– Song Ti font
– Hei Ti font
– You Yuan font
– Li Shu font

Included are the most common fonts of Simplified Chinese in mainland China: Song Ti, Hei Ti, Youyuan, Lishu and MS Ya Hei. You can view the detailed information about them at here. I used to have a total English version of Windows XP but now can’t quite remember how you must install the charset and encoding for Chinese / Asian languages first before displaying Chinese correctly on your system before using the Mandarin fonts.

Categories
Fonts & Typography Web Design Tips and Insights

What is this font? An online tool to detect or guess font typography in images

Browsing through websites after websites, you may wonder from time to time what a font is that’s used in the site design. While experience and necessary typographical knowledge is needed to make a sound guess, you can always upload a screenshot of image with some sample text of the font on to an online tool so that it can determine for you what is the font used, judging and comparing from a huge database of fonts and typographies.

For example, I wanted to know what font the black text of ‘rackspace‘ is in in the starting frame of the video on this page:

  1. Make a screenshot containing the text ‘rackspace’. You may want to resize the screenshot relatively small and save it in BMP format or high quality PNG so that the font guessing tool can do a good job.
  2. Upload the image at here: http://new.myfonts.com/WhatTheFont As you may have noticed, you can also specify an URL of image on the Web that the tool can download it for you.
  3. Click ‘Continue’.
  4. The system will present you a series of guessed characters, make sure at least one of them is right and leave empty whatever the system failed to recognize the right alphabetic character.
  5. Click ‘Continue’.
  6. Done. The system will now output an order of guessed fonts by similarity.

Thanks Jon for the tip.

what is this font

Categories
Fonts & Typography Hilariously Funny or Creepy Web Design Tips and Insights

Periodic Table of Typefaces

periodic table of typefaces

Authored by Squidspot, this would make a great poster for fellow web designers and typography lovers!

Categories
CSS & HTML Tips Fonts & Typography Web Design Tips and Insights

What are the Mandarin Chinese web safe fonts?

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 almost totally safe across all Chinese browsers:

  1. 宋体, mostly used for large chunks of paragraphs in small font sizes.
  2. 黑体, works out well in either headings or paragraphs.
  3. 幼圆, slender touches and rounded corners, pearl’s way.
  4. 隶书, renaissance of a rather traditional Chinese brush writing dating thousands of years back, generally modest and conservative with an ancient style yet powerful from within.
  5. 微软雅黑, 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 the Chinese localized version of Windows XP, it’s generally accepted as the most elegant and beautiful of the Mandarin Chinese web safe fonts by Chinese web designers.

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 in the left column.

chinese websafe fonts

Categories
Fonts & Typography

Symbolic fonts: Webdings and Wingdings

Webdings, Wingdings, Wingdings 2 and Wingdings 3 are very interesting symbolic fonts shipped in all versions of MS Windows but not included in other OS and platforms such as Mac OS. All versions of Internet Explorer display them correctly in CSS typography but in other browsers you can’t expect them safe for text glyphs because most of the characters or symbols are not found in Unicode.

Make a tiny image of the glyph for web usage.

Here is a complete collection of usable glyphs found in Webdings, Wingdings, Wingdings 2 and Wingdings 3 assembled in layered PNG. Download and open it in Fireworks so you can easily extract any of them to make an adorable tiny symbol image in your web designs or logo designs.

Webdings, Wingdings, Wingdings 2, Wingdings 3

Note that they are not web safe because only Windows comes equipped with these fonts. For a list of web safe fonts, read here.

Categories
CSS & HTML Tips Fonts & Typography Web Design Tips and Insights

Let’s use Lucida Grande for a change – 13 web safe fonts revisited

The 10 web safe fonts, Arial, Impact, Georgia, Times New Roman, Trebuchet MS, Comic Sans MS, Verdana, Tahoma – ahhh, wait a minute, I can’t remember the last 2. Let me take a look at the 9 web safe fonts, ok, it’s Courier New and Arial Black. Tahoma isn’t included in the 9 browser safe fonts list – are those that look almost the same across platforms such as Windows, Mac OS and other reading devices able to load web pages.

Serious web designers use and only use these fonts for web page texts to make sure the intended typography are correctly rendered in all visitor browsers. In addition to a few non-text symbolic fonts such as Weddings, below is an alphabetical list of the common web safe fonts for CSS typography:

(Windows font | Mac font | Font family)

  1. Arial, Arial, Helvetica, sans-serif
  2. Arial Black, Arial Black, Gadget, sans-serif
  3. Comic Sans MS, Comic Sans MS, cursive
  4. Courier New, Courier New, Courier, monospace
  5. Georgia, Georgia, serif
  6. Impact, Impact, Charcoal, sans-serif
  7. Tahoma, Geneva, sans-serif
  8. Times New Roman, Times, serif
  9. Trebuchet MS, Helvetica, sans-serif
  10. Verdana, Verdana, Geneva, sans-serif

Yeah, right. But that’s not all. These 10 fonts are not only web safe but also bear the same name across platforms. Or is it? Nonetheless, we have a few more choices than these that are also safe to use in cross-platform and cross-browser CSS typography:

(Windows font | Mac font | Font family)

  1. Lucida Console, Monaco, monospace
  2. Lucida Sans Unicode, Lucida Grande, sans-serif
  3. Palatino Linotype, Book Antiqua, Palatino, serif

Actually there are a few more, however as they are bitmap fonts rather than in TrueType, they’d look rugged when resized in browsers.

The 9 web safe fonts I have included in an image are very very incomplete. Not only does it miss Tahoma, Geneva, sans-serif but 3 advanced web safe fonts that’s our point here. Though they have fundamentally rather different names on different platforms, you can just copy and past the font-family lines above to use in your CSS, expecting the typography to look exactly the same on both Windows and Mac.

Let’s use Lucida Grand for a change! 🙂

Categories
CSS & HTML Tips Fonts & Typography

The 9 web-safe fonts

9 web safe fonts to use in your coding

Update: There’s actually one more font you can use freely and safely across platforms, that is Tahoma.

Update: Alright, there’s actually 3 more web safe fonts you can use. Check them out here.