Typography for a Dictionary App

mikelove's picture

Hello,

I'm an iOS/Android app developer, and inspired in part by Apple's recent iBooks font overhaul, I've started looking at how I might improve the typography in my own app. I've been reading up a lot on typography the last few weeks, but I'm still a total novice at this stuff and I'm hoping people here might be able to point me in the direction of some specific fonts (or at least some approaches to font selection) that might work well for it. It's actually a pretty successful app and I'm OK with spending some money to license a really great font, but a free font recommendation would be lovely too assuming that the license allows for it to be bundled with a non-open-source app.

My app is a Chinese-English translation dictionary, and while originally I was mostly looking at improving the font we use for Chinese (replacing the decidedly ugly built-in Hei-style ones with a nice and readable Ming-style), I've realized that I really ought to consider replacing the font used for English text too; I'd like something that's distinctive, looks good next to a Ming-style Chinese font (so probably something serifed) and that's well-suited for the type of reading one does in a dictionary.

Also, Chinese text in dictionaries is usually accompanied by pronunciation guides, written in a system called Pinyin - uses the Roman alphabet along with diacritical marks to indicate which of the four tones a particular syllable is in (macron / acute / caron / grave). So I'd like to either find a third font that I can use for that (something that goes well with the other two, but is distinctive enough to make it easy to distinguish from the other non-Chinese font) or just choose an English font that's also diacritic-friendly and remains very readable at different weights (so that I could, say, make the Pinyin semibold and the English regular).

So: does anyone have any recommendations for fonts I should consider? I'm in this for the long haul, so I'm primarily focusing on Retina / XHDPI displays and am OK if a font looks a bit fuzzy on lower-resolution smartphones.

I'm also looking for more general advice on how to style / space text in a dictionary entry; they generally have a lot of different sections that you're trying to separate - parts of speech, fields of use (biology, law, etc), styles (old-fashioned, obscene, slang), usage notes, example sentences (which in a Chinese dictionary combine Chinese characters, Pinyin, and English), etc - but using a different font (or even just a different style) for every one of these seems liable to give my users seizures. How do I separate a lot of different types of information in a single page of fairly-dense text on a smartphone screen?

Thanks,

Michael Love

riccard0's picture

Here are some previous threads about the topic. They‘re mostly about print, so not all suggestions could be appropriate:
http://typophile.com/node/5269
http://typophile.com/node/71084
http://typophile.com/node/42618

Frode Bo Helland's picture

Brioso comes to mind, but it's not a (dictionary) text face really. I suggest you start researching Chinese typefaces, because the chosen style will most likely be the most prominent visual element, and there aren't that many to choose from. The Latin alphabet will have to sit well with the Chinese. As for your other questions, you should find a skilled book / graphic designer to help you develope a good hierarchy and a template that's easy to navigate.

If you by any chance should happen to think I am one, feel free to drop me a mail :)

hrant's picture

For reasons of rendering clarity and matching the stroke-centric
nature of Chinese, I might recommend a slab serif. At which point
I can't resist shamelessly suggesting a very recently released
design that I played a role in: http://ernestinefont.com
Ernestine's large x-height and ample width also play a positive
role in terms of screen rendering. I'd have to double-check
whether it supports Pinyin, but if it doesn't it would certainly
be possible to commission an extension.

hhp

Andreas Stötzner's picture

I remember there was someone in Leipzig developing a particular Chinese/Latin typeface.
Don’t know if this would be fitting, but you may try to contact Fred Smeijers, he probably knows more about it.

mikelove's picture

riccard0 - thanks! Some good ideas in there, and a Retina Display is actually surprisingly similar to a densely-packed column of text in a printed dictionary in a lot of ways.

frode frank - thanks, Brioso is a neat one I wasn't familiar with - quite beautiful, not sure if it'll work as a font for small screen text but definitely worth trying out. We probably should consider hiring a designer for the hierarchy stuff, yes.

hrant - I'm liking the slab serif idea; on my own I found Skolar which seems like another good candidate, though I'm not quite sold on it at small sizes. It doesn't look like Ernestine supports Pinyin, but I'm not too worried about that (we added Pinyin to Droid Sans Bold ourselves for our Android app using OTMaster, though with a licensed font I imagine the designer wouldn't want us mucking around with their characters).

Andreas Stötzner - thanks, I'll look him up.

hrant's picture

I'm sure Nina can add Pinyin in a flash.
But it does have to go through FontFont.
Let me know and I'll promptly put you in
touch with the right person.

Skolar: Nice font, but as you suspect not
suited for small sizes. Also, it might be a bit
too mannered to harmonize with Chinese.

hhp

Florian Hardwig's picture

I remember there was someone in Leipzig developing a particular Chinese/Latin typeface.

That would be Roman Wilhelm and his Sung New Roman.

ahyangyi's picture

Some random comments:

Test the minimal size of Chinese characters first: I think most Chinese fonts are hard to read and will lose "less important" strokes at 8 or 9px. So as long as your Latin font reads well at that size it won't be a problem.

For pinyin characters, don't forget we also have the vowel ü which can occur in all four tones: ǖǘǚǜ.

I won't talk about the styles of dictionaries, but if you want some bold Chinese typeface, you'd better choose a right font first -- many Chinese fonts don't have a bold version.

Finally, note that we usually do not slant Chinese characters. Underlines, setting it in Kaiti (Regular script) or FangSong (Imitation Song) are common alternatives ways to emphasize words without emboldening them.

Andreas Stötzner's picture

we also have the vowel ü which can occur in all four tones: ǖǘǚǜ.

how do these get encoded?

Té Rowan's picture

Excerpted from an SFD file with the relevant characters:

StartChar: uni01CD
Comment: A-caron
Encoding: 461 461 743

StartChar: uni01CE
Comment: a-caron
Encoding: 462 462 744

StartChar: uni01CF
Comment: I-caron
Encoding: 463 463 745

StartChar: uni01D0
Comment: i-caron
Encoding: 464 464 746

StartChar: uni01D1
Comment: O-caron
Encoding: 465 465 747

StartChar: uni01D2
Comment: o-caron
Encoding: 466 466 748

StartChar: uni01D3
Comment: U-caron
Encoding: 467 467 749

StartChar: uni01D4
Comment: u-caron
Encoding: 468 468 750

StartChar: uni01D5
Comment: U-dieresis-macron
Encoding: 469 469 751

StartChar: uni01D6
Comment: u-dieresis-macron
Encoding: 470 470 752

StartChar: uni01D7
Comment: U-dieresis-acute
Encoding: 471 471 753

StartChar: uni01D8
Comment: u-dieresis-acute
Encoding: 472 472 754

StartChar: uni01D9
Comment: U-dieresis-caron
Encoding: 473 473 755

StartChar: uni01DA
Comment: u-dieresis-caron
Encoding: 474 474 756

StartChar: uni01DB
Comment: U-dieresis-grave
Encoding: 475 475 757

StartChar: uni01DC
Comment: u-dieresis-grave
Encoding: 476 476 758
Syndicate content Syndicate content