动态网络字体

Typography serves various functions on a website – enhancing content readability, establishing a clear information hierarchy, and defining a brand image. 

Throughout this tutorial, you will gain knowledge about: 

1. Titles
2. Text saturation
3. Paragraphs and text legacy
4. Spans
5. 测量
6. Accessibility and diverse typography

Titles

Consider titles as content navigators — all users should quickly understand your content organization by glancing at your titles, hence you should ensure your titles are explicit, informative, and used to convey your content hierarchy. Find out more about crafting explicit, informative titles.

Picture the front page of a newspaper. In this scenario, an H1 serves as the prominent statement (the primary objective). H2s are secondary titles that align with the main statement, while H3s delve further into details.

To insert a Title:

1. 启动 添加面板
2. 滚动到 排版
3. 点击并拖动 标题 onto your workspace

类别

Instead of setting typography properties individually for each title, you can utilize CSS to form categories. Categories enable you to define a style for one title and apply that style to other titles across your website.

To form a category:

1. Ensure your 标题 is highlighted on the workspace
2. 访问 选择器字段 在里面 样式面板
3. 为您的 category (e.g., Grand title)

This category will preserve all the style adjustments you make. If you modify the font or the style, the category (Grand title) will retain these adjustments. If you need to undo a change, you can reset that property.

For reusing a category:

1. Ensure the new 标题 is selected on the workspace
2. 访问 选择器字段 在里面 样式面板
3. Commence typing the category name you wish to reuse
4. 选择 category 从列表中

Subsequently, altering a title — as you are actually styling the category — all titles with that matching category will also undergo the modification. 

Markups

Markups enable you to modify the default style of text components, such as titles, paragraphs, and links. Any stylistic adjustments you make to a markup or a category will impact all related elements without the necessity to update them individually. Discover more about HTML markups.

To style a markup:

1. 挑选一个 标题 在工作区上
2. 访问 选择器字段 (without adding a category) 
3. 选择 markup you desire to style (e.g., All H1 Titles)
4. Edit settings such as font style, color, weight, etc.

Any style alterations you make here will be applied to every element with that markup (e.g., All H1 Titles). 

For more insights on selecting your typography choices, explore Web Typography 101 on the Webflow blog.

Text saturation

Text saturation employs clipping to implement color within text. By default, a text saturation uses the font color. 

To introduce a personalized text saturation:

1. 访问 样式面板
2. 滚动到 排版 部分
3. Adjust the font color to automatically generate a 类别
4. 访问 选择器字段 在里面 样式面板 to rename that 类别 (e.g., Larger title)
5. 滚动到 背景 and next to 类型, set a gradient
6. Click twice on the left end of the gradient bar and opt for your initial color stop 
7. Click twice on the right end of the gradient bar and choose the second color stop
8. Click and drag the circle next to Angle to modify the gradient’s orientation 
9. ClickChoose the drop-down menu located next to 剪裁 并选择 Clip background to text

When modifying the gradient, it instantly reflects the changes within the text. You can apply any background (even stack multiple backgrounds) using this technique. By clipping the background to text, it disregards the font color and instead uses the color from your Backgrounds section.

Text Inheritance and Paragraphs

Ancestors can pass on text style details to their descendants. You can establish text styles on prevailing elements to be inherited by their offspring and supersede these styles in the offspring’s settings.

It is a common practice to employ this method to define global font styles on the body tag, to position text and other elements within sections, and to override default link block styles.

For text inheritance usage:

1. 选择 Body 元素 (on any page) 
2. 导航至 选择器字段 在里面 样式面板
3. 选择 正文（所有页面）标签
4. Customize settings according to your preferences

The Body (All Pages) tag stands as the top-level tag. Alterations made to this tag (like the font) will cascade down to all text elements. This strategy is helpful for setting defaults on a website.

Overriding Default Inheritance Styles

Perhaps you wish to have a distinct font for paragraphs compared to the default one. Upon modifying the font, you will witness it following cues from the Body (all pages) tag. Any alteration to this font setting will generate a new class.

A class is automatically generated as soon as you style a specific property—it’s the method to override default inherited style. The orange indicator on the property icon signifies that there’s an inherited value for that property. By clicking on the orange text, you can pinpoint where the value is being inherited from. More insights on inheritance indicators are available.

For overriding a default inheritance style:

1. Select the element you intend to style
2. Modify any of its settings (font, weight, etc.)
3. 输入 选择器字段 to rename the class (e.g., “Special paragraph”) 

Now you can delve deeper to view the entire inheritance hierarchy. 

Learn more about text style inheritance. 

Text Spans

Spans offer a formatting choice to style specific segments of text elements, such as individual characters or words. 

To use a span:

1. Highlight the desired text for formatting
2. 访问 选择器字段 在里面 样式面板 to establish a 班级
3. Adjust the settings as needed (font, background color, etc.)

To remove span formatting:

1. Highlight the text
2. 轻按 清除格式 from the text toolbar popup (the A with an x)

Gain deeper insights into spans and inline text formatting.

Measurement Units 

While many web typography units are in pixels, there exist several other alternatives: 

• 埃姆斯
• Rems (root ems)
• Percentages
• VW (viewport width)
• CH (character unit)

埃姆斯

Originally based on the width of a typeface’s capital M, an em looks to its parent element for proportional font size scaling.

With a font size of 16 pixels:

• 1 em 等于 16 像素 
• 2 ems totals 32 pixels
• 1.5 ems results in 24 pixels

You can also define the font size on the parent element of a paragraph, such as a Div block:

1. 选择父元素 
2. Modify the font size (e.g., to 20 pixels) in the 样式面板 在下面 排版

When the parent element’s size is 20 pixels:

• 1 em now equals 20 pixels
• 2 ems equate to 40 pixels
• 3 ems equals 60 pixels

Rems (Root Ems)

Rems are relative to the HTML font size.

A rem value is computed by multiplying your rem value by the HTML font size (which respects the browser’s font size, unless manually modified in the code). 

This approach ensures compliance with browser preferences (assuming custom textsize is adjusted by the browser) and giving the site visitors the option to magnify sites to a more comfortable viewing size, and is recommended for accessibility. Discover more about utilizing rems for responsive text scalability. 

Portions

Similar to ems, the percentage is in relation to the font size of the parent element.

Viewport Width (VW)

VW is a unit that measures the width of the browser’s viewport and adjusts proportionally based on the width of the viewport.

Character Unit (CH)

CH works well in sizing elements like a paragraph or heading to control the number of characters one has to read per line. 

For instance, if a paragraph has a maximum width of 60ch, it matches the chosen font (the typeface of the paragraph) and sets the paragraph’s edge (its box) to be of the width of 60 zeros.

CH allows you to determine the 宽度 of a text element when you aim to restrict the number of characters (once more, in relation to the width of the font’s zero character).

Accessibility and comprehensive typography

When designing for the web, it’s crucial to take into account accessibility and inclusive design. Let’s explore some simple starting points to enhance the accessibility and inclusivity of the web in terms of typography. 

Font Readability

Thin fonts can be very challenging to read — not just in headings, but particularly in paragraphs. 

Utilize Webflow’s built-in Color contrast checker to evaluate the contrast ratio between your text and its background. You can also explore these exceptional color contrast tools to assess the color contrast of your designs and delve into best practices:

• TPG 色彩对比度分析仪
• tanaguru 对比度检测仪
• ‍WebAIM 对比度检查器
• 可着色

Characters per line

Extensive lines of text can overwhelm and fatigue a reader — forcing their eyes to travel significant distances from left to right. Utilize a container to limit the horizontal span of text on the page. A range of 60 to 80 characters per line is suggested.

By limiting the horizontal extent of its content with a container, Stripe enhances the readability of its text for an improved reading experience.

If Stripe opted not to restrict its text span with a container, it would rapidly become challenging to read.

As discussed earlier, one approach is to impose limits on the maximum width of a text element based on the desired character count per line. Remember: 60 CH is equivalent to 60 zeroes regardless of the font selected.

Line spacing

Appropriate line spacing significantly reduces the overwhelming feeling and enhances the ease of scanning across and down a page.

Ensure that your line spacing is at least 1.5 times the font size for paragraphs and text blocks.

A perfect line height should be no less than 1.5 times the font size for paragraphs and text blocks.

Clearly-stated hyperlinks

Ensure that your hyperlinks are descriptive and actionable. When read out of context by screen readers, link text should provide:

1. The name of the link
2. The destination of the link

避免：

• Incorporating links in generic terms like “more,” “this page,” or “click here”
• Using raw URLs as clickable links

Use:

• Incorporate links in clear, explicit language that informs users about the link’s destination and its relevance
• Specify if a link will open high-bandwidth media such as a PDF or video within the linked text

To observe an instance of screen readers announcing uninformative links on a page, refer to the section on links in our video tutorial on Advanced web typography. For further information on descriptive links, visit WebAIM’s article on hypertext links.

导航 

Evaluate all aspects of your navigation for functionality, not just for appearance, but also for screen reader interaction. This is an excellent approach to gain insight into how users can navigate your content.

More educational material on accessibility and inclusive design is being continuously added to Webflow University, so make sure to stay updated!

In the meantime, explore our lesson on enhancing your website’s accessibility and enroll in our accessibility course.

• 关于
• 最新帖子

麦宜云

Webflow 专家 在 Tenten

Webflow 专家和前端开发人员，拥有 4 年以上经验。我拥有多种技能（HTML、CSS、JS、Figma、Adobe），可打造出色的 Webflow 体验。70 多个项目磨练了我无缝融合自定义代码和视觉开发的能力。我做事有条理、按时完成任务、热衷于成长，在动态环境中表现出色。让我们突破界限，创造非凡。

Ewan Mak 的最新帖子 (查看全部)

• 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
• 定心盒摘要 - 2024 年 4 月 15 日
• 存储网站以供将来参考 - 2024 年 4 月 15 日

相关文章

• 对动态内容的限制

  Webflow 中的动态内容使我们能够随时添加、修改和引入内容……

• 继承的文本样式概述

  查看元素如何将文本样式信息传递给其子元素的示例。

• 网址

  保留 slug 的概述以及如何在“页面”面板中更改 URL。