信任的团队
格式文本搜索引擎和可访问性。
网站排版有许多目的,内容清晰,可读性强,创造一个清晰的层次结构的信息,并建立一个品牌的身份。
在这节课中,您将学习:
认为标题内容指南,任何人都应该能够理解的方式看一眼你组织你的内容你的标题,所以你要确保你的标题是清晰的,描述性的,用来表达你的内容的层次结构。了解更多关于写清楚,描述性的标题。
想象一份报纸的头版。在这种背景下,一个H1是页面上的大声明(目的)。硫化氢是小标题融入大的声明,和h3更加详细。
添加一个标题:
而不是配置字体属性为每个单独的标题,您可以使用CSS来创建类。类允许您创建一个样式的标题和风格应用于另一个标题在你的网站。
创建一个类:
这个类将记住所有样式的变化。如果你更改字体,或者重量,类(大标题)会记得这些变化。如果你想删除一个改变,你可以重置财产。
重复使用一个类:
现在,当你改变一个标题——因为你实际上样式类——所有标题相同的类也会改变。
标记允许您更改默认样式的文本元素,如标题、段落、和链接。任何风格的改变你申请一个标签或一个类将会影响所有相关元素,而无需单独更新它们。了解更多关于HTML标记。
风格一个标签:
任何风格你在这里所做的更改将适用于每一个元素的标签(例如,所有H1标题)。
了解更多关于如何选择你的字体选项,查看网页排版Webflow博客上的101年。
文本填充使用裁剪应用颜色的文本。一个文本填充使用默认字体颜色。
添加一个自定义文本填充:
当你做出改变梯度,它在文本实时更新。你可以把任何背景(或堆栈多个背景)使用这种方法。当背景是剪文本时,它将忽略的字体颜色和背景部分中使用的颜色。
父元素可以通过文本样式信息到他们的孩子。你可以设置文本样式在父元素应用于他们的子元素和子元素覆盖这些样式设置。
通常使用这种方法来设置全球body标签字体样式,对齐文本和其他元素的部分,和覆盖默认的连接块风格。
使用文本继承:
身体(所有页)标签是顶级标签。改变这个标签(如字体)会通过你所有的文本。这是一个伟大的方式来设置默认网站上。
也许你想要段落字体不同于默认字体。当你点击字体,你可以看到它从身体(所有页)标记。当你改变这个字体设置,它将一个新类。
自动创建一个类的那一刻你风格的特定财产——这是重写默认继承风格的关键。样式属性上的橙色指示器图标意味着有一个继承的属性值。您可以单击橙色文本看到被继承的值。了解更多关于继承指标。
覆盖默认继承风格:
现在你可以点击查看完整的继承层次结构。
跨度是一个格式化选项样式文本元素的特定部分,如单个字符或单词。
使用一个跨度:
净跨格式:
很多字体设计单位在网络上设置用于像素,但也有许多其他选择:
一个em最初是基于一个字体的宽度首都m Ems看他们的父元素比例字体大小按比例。
如果一个字体是16像素:
你也可以设置字体大小在一个段落的父元素,像一个Div块:
当父元素是20像素:
雷姆是相对于HTML字体大小。
rem通过你的眼动计算值和乘以HTML字体大小(它,除非你手动改变它的代码,会尊重浏览器的字体大小)。
这尊重浏览器偏好的好处(如果自定义文本大小设置浏览器)并允许网站访问者扩大到一个更舒适的观看的大小网站,并为可访问性是首选。了解更多关于使用雷姆响应文本大小。
像ems,百分比指的是父元素的字体大小。
大众是一个测量的浏览器窗口的宽度,尺度比例基于视窗的宽度。
CH进行了类似的一个段落或标题的字符数限制有人阅读每一行。
例如,如果一个段落的最大宽度为60 ch,需要选中的字体(段落的字体),并设置段落的边界(箱)的宽度等于60 0。
CH允许您设置宽度在一个文本元素,当你试图限制的字符数(同样,基于字体是零字符的宽度)。
可访问性和包容性设计网页的设计时需要考虑的很重要。让我们看一些简单的地方开始做网页时更易于理解和包容的排版。
薄的字体非常难以阅读,不仅在标题,但特别是在段落。
这也是在字体重量分布不均的情况——一些字符不是很清晰。
确保你的字体不小于16个像素为正文。
不均匀的垂直对齐的文本块(例如,当文本为中心)可以创建一个困难的阅读体验。锯齿状排列使得读者很难遵循的。
即使你的字体清晰,参差不齐的文本对齐方式使它的读者从一行到下一个。
区分大写和小写字母的语言往往更清晰的写在句子中(例如,“句子”)或标题案件(如“标题”)。从本质上讲,你写出你的文本只使用资本的需要或期望。
全部大写可以为读者介绍一个更重的认知负荷,特别是在长段落。屏幕阅读器宣布作为单独的字母全部大写,中断,使得它难以理解。考虑限制使用全部大写的长字符串的文本。
全部大写可以引入一个重认知负荷为读者考虑限制使用全大写字母长字符串的文本。
在网上有一个期望,强调文本显示超链接。如果你想画重点,考虑使用斜体和粗体文本(或改变风格的包装东西跨度)。
而不是强调你的文字画重点(可以为超链接混淆),使用斜体(左)或粗体文本(右)。
对比测量的背景和前景的区别。低对比度会像有些浅灰色有点暗灰色。或栗色的红色。粉红色或紫色。
高对比度并不意味着我们不再考虑其他诸如字体重量(超级薄的字体,会发生高对比度背景仍然是超级难辨认的)。但更高的对比度通常会导致增加易读性,这是一个伟大的事情。
您可以使用Webflow的内置颜色对比检查评估你的文本对其背景的对比度。你可以检查你的设计的色彩对比和了解更多关于最佳实践与这些优秀的色彩对比工具,:
长长的队伍的文字迷惑和轮胎读者——他们的眼睛去旅行真的从左到右。使用一个容器收缩水平文本跨越整个页面。建议60至80个字符每行。
条纹的使用一个容器来限制他们的内容跨越多远页面是一个更简单的阅读体验。
如果条纹选择不限制跨文本的一个容器,它很快就会变得难以阅读。
正如我们前面讨论的,一种方法是限制一个文本元素的最大宽度,然而很多字符在一条线。记住:60 CH = 60 0无论你选择的字体。
文本与足够的行高使其更压倒性的和容易追踪,一个页面。
你应该至少1.5倍行高段落和文本块的字体大小。
理想应该至少1.5倍行高段落和文本块的字体大小。
你的链接应该是有意义的和可行的。屏幕阅读器可以给游客的概述页面上的链接。当链接文本阅读断章取义,它应该告诉读者:
别:
做的事:
对屏幕阅读器的一个例子宣布无益的页面上的链接,检查部分的链接视频课先进网络排版。关于描述链接的更多信息,访问WebAIM超文本链接的文章。
你所有的导航应该测试,不仅对它会是什么样子,但如何与它交互使用屏幕阅读器。这是一个伟大的方式来开发的理解人们如何浏览你的内容。
我们添加越来越多的Webflow大学教学主题的可访问性和包容性设计,所以继续检查回来!
与此同时,查看我们的教训使你的网站更容易溢出参加我们的可访问性课程。
