tbtc-website
tbtc-website copied to clipboard
keep-network
Multi-Language Typography & Font Solutions
- [x] explore font alternatives for language sets
- [x] typographic grid + modular scale adjustments (none needed at the moment)
- [x] explore community engagement for the above ^
- [x] decide on mixed or single font usage for translated site
- [x] QA buttons for word lengths / widths.
Aperçu support currently is:
"The PRO containing further language support in the form of Cyrillic and Greek scripts, as well as OpenType features, stylistic alternates, and copious marks and symbols. The Arabic contains all the features within the PRO version, but also full support for the Arabic script and is available in four base weights — Light, Regular, Medium and Bold.
Support for Thai and Vietnamese will be following shortly."
@ironng meant to tag you sooner - what's your experience with handling non-english typography? is it possible to mix typefaces in a single line/paragraph? for example, in Figma, it appears that selecting Aperçu for the P1, non-translatable (proper nouns) remain in Aperçu but translated Japanese text is somehow picking up Noto Sans JP by default.
see below:
also, here's looking at some more options:
Leaning towards Noto Sans, fwiw.
@Gluzman mixing typefaces within lines or paragraphs is a bit trickier - it would require us to use special html to designate exceptions. For instance, any non-translatable text would have to be wrapped in some sort of <span> with a special classname. I like the Apercu + Noto Sans combo the best, but if we just have to go with one to make it simpler for admins, Noto Sans would be my pick!
@ironng yeh as much as i'd advocate apercu + noto, it would also make the site heavier to load multiple faces, right? I think since the site would predominantly be Noto anyway, we may as well just use that one face.
what else might you need to implement?
how does Lottie site handle typefaces and translation btw? https://lottiefiles.com/?lang=zh_CN @ironng ?
@Gluzman having both fonts for the site would be definitely heavier. Noto would just be for the Japanese/Korean/Chinese versions of the site, correct? I think based on how it's built right now, we'll end up having to load both for those languages. If Noto Sans is a google font we can easily put in a conditional to only load it for these langs.
Poking around the Lottie site, it looks like they just use the same font for all versions of the site (Chinese, English, and German). Also, the root html element has one special tag, lang, which denotes the current language. Other than that I didn't see any difference in mark up (special classes) for each language, at least in the hero section.