- 101 UX Principles
- Will Grant
- 296字
- 2021-07-16 18:02:34
Chapter #3. Users Already Have Fonts on Their Computers, So Use Them
Yes, your corporate brand font is lovely. It's so playful and charming but it takes an extra three seconds to load the page, as the font needs to be downloaded from the server and rendered—and nothing appears until it loads—driving your users crazy.
Including custom display fonts for headings and titles is fine; it helps to brand the product and adds some visual interest. However, using custom fonts for body copy is generally a bad idea.
First of all, these fonts have to be loaded from somewhere, whether it's Google Fonts, Typekit or your own CDN. This means that there is an overhead in getting the font files down to the user's machine. Content-heavy pages will often break while the correct fonts are downloaded and rendered—the dreaded Flash of unstyled content or Flash of unstyled text (FOUC) (https://en.wikipedia.org/wiki/Flash_of_unstyled_content).
Secondly, if, by specifying wild and wonderful body copy typefaces, you think you're exerting some control over the end result, then think again: responsive design and 1,000s of different devices out in the wild mean your pages will look a little different for everyone.
Luckily, whether your user is on a phone or a desktop, Windows or Mac (or Linux), they have some beautiful, highly-readable fonts already installed and waiting to be used. The "system font stack" is a CSS rule that tells modern browsers to render type in the system-native typeface.
In most cases, using system-native fonts makes pages appear more quickly, and the type look sharper and more readable.
Font-family: apple-system BlinkMacSystemFont Segoe UI Roboto Oxygen-Sans Ubuntu Cantarell Helvetica Neue sans-serif
- 零點起飛學Xilinx FPG
- Python GUI Programming:A Complete Reference Guide
- Linux運維之道(第2版)
- 現代辦公設備使用與維護
- 深入淺出SSD:固態存儲核心技術、原理與實戰(第2版)
- 單片機原理及應用系統設計
- Hands-On Machine Learning with C#
- 嵌入式系統中的模擬電路設計
- 固態存儲:原理、架構與數據安全
- 電腦高級維修及故障排除實戰
- 單片機技術及應用
- 計算機組成技術教程
- 微服務架構基礎(Spring Boot+Spring Cloud+Docker)
- 多媒體應用技術(第2版)
- Hands-On One-shot Learning with Python