- 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
- Aftershot Pro:Non-destructive photo editing and management
- Raspberry Pi 3 Cookbook for Python Programmers
- 圖解西門子S7-200系列PLC入門
- 深入理解Spring Cloud與實戰(zhàn)
- FPGA從入門到精通(實戰(zhàn)篇)
- Augmented Reality with Kinect
- The Applied AI and Natural Language Processing Workshop
- Mastering Manga Studio 5
- Learning Stencyl 3.x Game Development Beginner's Guide
- 電腦軟硬件維修從入門到精通
- OUYA Game Development by Example
- R Deep Learning Essentials
- 面向?qū)ο蠓治雠c設(shè)計(第3版)(修訂版)
- 龍芯自主可信計算及應(yīng)用
- Source SDK Game Development Essentials