How to choose the font for a corporate website? Attractive fonts, if they slow down loading, are difficult to read or cannot cover multiple languages, will all become experience costs

Font is part of a brand's temperament, but a web page is not a poster. The corporate website font must simultaneously address reading, hierarchy, character coverage, authorization and loading performance; otherwise, the more "distinctive" the font is, the more likely it is to become a cost for users.

01 Web page fonts first serve reading and then style

Corporate websites often start with the font when undergoing visual upgrades: narrower, more geometric and more fashionable English fonts can indeed quickly change the temperament. However, web pages contain navigation, buttons, titles, main text, tables and mobile content. Different scenarios have completely different requirements for readability.

Therefore, the font for brand display and the font for text reading do not have to be the same. A mature system can have brand fonts handle large headings and short texts, leaving long texts, tables and complex numbers to more stable reading fonts. The so-called "unification" does not mean that the entire website can only use one character family, but rather that the roles and rules are unified.

02 First, establish the font size and hierarchy. Do not adjust each page by feeling

The most likely part of web layout to get out of control is not the font but the hierarchy. The homepage has a 72px title, the inner pages suddenly become 52px, and the article H2 uses another ratio. The mobile has all been manually adjusted. The final design draft seems to have changed, but the development team finds it very difficult to maintain.

A more reasonable approach is to first establish roles such as Type Scale: Display, H1, H2, H3, Body, Small, Caption, etc. Define the font size, line height, character weight and applicable scenarios for each role, and then scale according to the responsive rules. This way, the visual hierarchy is predictable and it is also easier to enter the design system.

03 Line width, line height and paragraph spacing directly affect the reading of long texts

Long text is too wide, and the eyes need to reposition each time a new line is added. If the line spacing is too tight, it is easy to read the serial lines. W3C WCAG 2.2 version 1.4.12 requires that when users adjust the line height to at least 1.5 times the font size and increase the spacing between characters and words, there should be no loss of content or functionality on the page. It emphasizes "allowing users to adjust without breaking the version", rather than forcing all websites to use the same set of values fixedly.

The W3C supplementary guidelines on cognitive accessibility also emphasize reducing congestion through white space and clear partitioning. For corporate articles, white papers and long pages, the width of the main text, line height and paragraph space often have a greater impact on the reading experience than having an additional font.

04 Chinese, multilingual and digital scenarios need to be tested separately

Just because an English font looks very beautiful in a brand proposal doesn't mean it can cover Chinese, Japanese or Arabic. A common solution for multilingual corporate websites is to establish a font fallback: for Latin letters, use brand fonts; for CJK, use local font families suitable for screen reading, and ensure that there are no significant differences in font size, x-height, and font weight perception.

Numbers also need to be tested. Numbers, percentages, currencies and tables are frequently seen in financial, data back-end and parametric products. Alignment and equal-width numbers may be more important than brand sense. Design acceptance should not be based solely on one English slogan on the homepage.

05 The performance cost of WebFont must be taken into account when choosing the font

The font performance guide of web.dev points out that complete font families and unnecessary font weights can lead to significant download volumes, and suggests controlling loading by splitting font weights and character subsets, reasonable caching, preload and font-display. If the font blocks the text display, what the user sees is not "Advanced", but a white screen or a sudden jump.

Therefore, web pages usually do not need to load nine character weights ranging from 100, 200, 300 to 900 at once. The weight of the few characters actually used is sufficient. The CJK font library is particularly large in size, and it is even more necessary to select an appropriate strategy based on the product and licensing conditions.

06 Layout changes caused by font switching also need to be controlled

When the page is first formatted with the system's fallback font and then replaced after WebFont is downloaded, the different character widths of the two fonts may cause the title to break lines and the buttons to become wider, thereby resulting in layout displacement. In CLS optimization, web.dev suggests choosing a more matching fallback and can use font measurement capabilities such as size-adjust and ascent override to reduce variations.

The design end can test in advance whether the page is still available when "WebFont is not loaded", rather than only accepting it in the ideal environment where the local font has been cached.

07 Font authorization is not something that is confirmed on the last day before going live

Some fonts are allowed for desktop design but do not include WebFont, App or commercial website licenses. The fact that designers can use font files in Figma does not mean that enterprises can legally deploy them to servers.

Therefore, for the brand's corporate website project, it is best to verify the authorization scope, deployment method, language coverage and budget when confirming the visual direction. If it cannot be used, it should be replaced as soon as possible instead of being modified only after all the pages are completed, which may lead to large-scale changes in the layout.

08 Do not make text into pictures to "preserve the font"

To maintain a certain font effect, exporting the title as a PNG is a very poor conventional solution. The inability to normally select, search for, and respond to line breaks in image text will also increase accessibility and SEO costs. The image format guide of Web.dev also reminds that visual content containing text should give priority to real web page text and WebFont.

A very small number of purely decorative logos or artistic fonts can be regarded as graphic assets, but the main text and key titles should be kept as authentic as possible.

09 Conclusion: Web page fonts are a system jointly determined by brand, content and technology

When choosing a font, one should not merely ask "Which one looks better?" One should also ask: Is a long article easy to read? Is the mobile stable? Is multilingual coverage? How many word weights need to be loaded? Is there a legal Web authorization? Will there be a bounce when fallback occurs?

Only when these issues are resolved during the design stage does the font truly become a brand asset, rather than a performance and maintenance burden after going live.

Frequently Asked Questions

How many types of fonts are generally needed for a corporate website?

Usually, 1-2 core character families are sufficient, and hierarchies can be established through font size, font weight, and characters. Multilingual sites may need to configure the fallback font according to the script.

Must the line height of the main text be 1.5?

WCAG 1.4.12 mainly requires that the page allow users to adjust the line height spacing to a specified level without losing content. The specific default layout should also be combined with language, font size and reading scenarios.

Why does WebFont cause pages to jump?

The width and measurement of fallback fonts are different from those of formal fonts. After font replacement, the size of line breaks and elements will change, thereby causing layout displacement.

Are Chinese fonts all very large?

A complete CJK font library usually has a large number of characters and the file size may be considerable. It needs to be optimized based on font services, subsets, caching, and actual business scenarios.

Can the title be transformed into an image to ensure visual appeal?

A small amount of Art Deco text is acceptable, but ordinary titles are not recommended. Real text is more suitable in terms of accessibility, search, responsiveness and maintenance.