For a long time I've noticed that adjusting line-height
and adding some extra space between paragraphs both relative to the chosen font-size
can make a huge impact on the readability of Web site content, but so far I have always selected ad-hoc values for these attributes.
很长一段时间以来,我都注意到调整行高和在段落之间增加一些额外的空间,这两者都与所选择的字体大小有关,这会对网站内容的可读性产生巨大的影响,但是到目前为止,我一直为这些属性选择一些特别的值。
Are there any recommendations in typography, publishing, or psychology literature for how to adjust values for these properties relative to each other?
在排版、出版或心理学文献中,对于如何调整这些属性之间的相对价值有什么建议吗?
2 个解决方案
#1
6
I can't post a detailed answer, I'm afraid, but I'd suggest that you read Tim Brown's article 'More Meaningful Typography', at A List Apart, for guidance.
恐怕我不能给出一个详细的答案,但我建议你阅读蒂姆·布朗(Tim Brown)的文章《更有意义的排版》(More significant Typography),并在列表中列出,作为指导。
In essence, it seems that the width ('measure') of a block of text should be around 50-60 characters, the line-height
set at 1.5
(without a unit, which will be 1.5 times the font-size
, regardless of the units used to set the font-size
).
从本质上看,一个文本块的宽度(“measure”)应该在50-60个字符左右,行高设置在1.5(没有单位,将是字体大小的1.5倍,不管用于设置字体大小的单位是什么)。
Characters themselves seem to be set around the 16px mark, but Tim suggests using a scale, such as that represented by the Golden Ratio to define the relative font-sizing of headings, body text, captions and so forth.
字符本身似乎设置在16px左右,但是Tim建议使用一个标度,比如用黄金比例来定义标题、正文、字幕等的相对字体大小。
#2
8
A deep and mathematical answer to your question can be found at "Secret Symphony: The Ultimate Guide to Readable Web Typography": http://www.pearsonified.com/2011/12/golden-ratio-typography.php
你的问题的一个深刻的数学答案可以在《秘密交响曲:可读的网页排版的终极指南》中找到:http://www.pearsonified.com/2011/12/golden-ratio-typography.php。
The article takes into account three dimensions: line height, font height adn page width (well, text width) and luckily they also provide a useful calculator: Golden Ratio Typography Calculator (http://www.pearsonified.com/typography/)
本文考虑了三个维度:行高、字体高和页面宽度(嗯,文本宽度),幸运的是,它们还提供了一个有用的计算器:黄金比例排版计算器(http://www.pearsonified.com/typography/)
#1
6
I can't post a detailed answer, I'm afraid, but I'd suggest that you read Tim Brown's article 'More Meaningful Typography', at A List Apart, for guidance.
恐怕我不能给出一个详细的答案,但我建议你阅读蒂姆·布朗(Tim Brown)的文章《更有意义的排版》(More significant Typography),并在列表中列出,作为指导。
In essence, it seems that the width ('measure') of a block of text should be around 50-60 characters, the line-height
set at 1.5
(without a unit, which will be 1.5 times the font-size
, regardless of the units used to set the font-size
).
从本质上看,一个文本块的宽度(“measure”)应该在50-60个字符左右,行高设置在1.5(没有单位,将是字体大小的1.5倍,不管用于设置字体大小的单位是什么)。
Characters themselves seem to be set around the 16px mark, but Tim suggests using a scale, such as that represented by the Golden Ratio to define the relative font-sizing of headings, body text, captions and so forth.
字符本身似乎设置在16px左右,但是Tim建议使用一个标度,比如用黄金比例来定义标题、正文、字幕等的相对字体大小。
#2
8
A deep and mathematical answer to your question can be found at "Secret Symphony: The Ultimate Guide to Readable Web Typography": http://www.pearsonified.com/2011/12/golden-ratio-typography.php
你的问题的一个深刻的数学答案可以在《秘密交响曲:可读的网页排版的终极指南》中找到:http://www.pearsonified.com/2011/12/golden-ratio-typography.php。
The article takes into account three dimensions: line height, font height adn page width (well, text width) and luckily they also provide a useful calculator: Golden Ratio Typography Calculator (http://www.pearsonified.com/typography/)
本文考虑了三个维度:行高、字体高和页面宽度(嗯,文本宽度),幸运的是,它们还提供了一个有用的计算器:黄金比例排版计算器(http://www.pearsonified.com/typography/)