8000 csswg-drafts/css-fonts-4/Overview.bs at c16edc424e7be5f962dcfc0ea18f67a055b064c3 · w3c/csswg-drafts · GitHub
Skip to content

Overview.bs

Latest commit

 

History

History
3389 lines (2802 loc) · 143 KB

Overview.bs

File metadata and controls

3389 lines (2802 loc) · 143 KB
<td>4
<td>5
<td>6
<td>7
</table>
Note: To preserve readability, an UA applying
these guidelines should nevertheless avoid creating font-size resulting
in less than 9 device pixels per EM unit on a computer display.
Note: In CSS1, the suggested
scaling factor between adjacent indexes was 1.5 which user experience
proved to be too large. In CSS2, the suggested scaling factor for computer
screen between adjacent indexes was 1.2 which still created issues for the small
sizes. The new scaling factor varies between each index to provide a better
readability.
The actual value of this property might differ from the computed
value due a numerical value on 'font-size-adjust' and the
unavailability of certain font sizes.
The computed value of this property is affected by the computed value of 'font-min-size'
and 'font-max-size'.
Child elements inherit the computed 'font-size' value (otherwise, the
effect of 'font-size-adjust' would compound).
<div class="example">
<pre>
p { font-size: 12pt; }
blockquote { font-size: larger }
em { font-size: 150% }
em { font-size: 1.5em }
</pre>
</div>
<h3 id="font-min-max-size-prop">Minimum and maximum font size: the 'font-min-size' and 'font-max-size' properties</h3>
<pre class="propdef">
Name: font-min-size
Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>>
Initial: 0
Applies to: all elements
Inherited: yes
Percentages: refer to parent element's font size
Computed value: absolute length
Media: visual
Animatable: As <<length>>
</pre>
<pre class="propdef">
Name: font-max-size
Value: <<absolute-size>> | <<relative-size>> | <<length-percentage>> | infinity
Initial: infinity
Applies to: all elements
Inherited: yes
Percentages: refer to parent element's font size
Computed value: absolute length
Media: visual
Animatable: As <<length>>
</pre>
These two properties allow a website or user to require an element's font size to be clamped within the range
supplied with these two properties. If the computed value 'font-size' is outside the bounds created by 'font-min-size'
and 'font-max-size', the use value of 'font-size' is clamped to the values specified in these two properties.
Some user agents provide a nonstandard mapping between the computed value of 'font-size' and the used value of 'font-size'.
The interaction of those nonstandard algorithms with 'font-min-size' or 'font-max-size' is explicitly undefined.
If the 'font-min-size' property is computed to be larger than the 'font-max-size' property, then the two properties are ignored.
Users with accessibility preferences can set this in a user-agent style sheet to force websites' text to become larger.
The computed value of these two properties affects the computed value of 'font-size'.
<h3 id="font-size-adjust-prop">
Relative sizing: the 'font-size-adjust' property</h3>
<pre class="propdef">
Name: font-size-adjust
Value: none | <<number>>
Initial: none
Applies to: all elements
Inherited: yes
Percentages: N/A
Computed value: as specified
Media: visual
Animatable: as <<number>>
</pre>
For any given font size, the apparent size and legibility of text
varies across fonts. For scripts such as Latin or Cyrillic that
distinguish between upper and lowercase letters, the relative height
of lowercase letters compared to their uppercase counterparts is a
determining factor of legibility. This is commonly referred to as the
<dfn>aspect value</dfn>.
Precisely defined, it is equal to the x-height of a font divided by
the font size.
In situations where font fallback occurs, fallback fonts might not
share the same aspect value as the desired font family and will thus
appear less readable. The 'font-size-adjust' property is a way to
preserve the readability of text when font fallback occurs. It does
this by adjusting the font-size so that the x-height is the same
regardless of the font used.
<div class="example">
The style defined below defines Verdana as the desired font family, but if Verdana is not available Futura or Times
will be used.
<pre>
p {
font-family: Verdana, Futura, Times;
}
&lt;p>Lorem ipsum dolor sit amet, ...&lt;/p>
</pre>
Verdana has a relatively high aspect value, lowercase letters are relatively tall compared to uppercase
letters, so at small sizes text appears legible. Times has a lower aspect value and so if fallback occurs,
the text will be less legible at small sizes than Verdana.
</div>
How text rendered in each of these fonts compares is shown below, the columns show text rendered in Verdana, Futura and Times.
The same font-size value is used across cells
within each row and red lines are included to show the differences in x-height. In the upper half each row is rendered in the same font-size value. The same is true
for the lower half but in this half the 'font-size-adjust' property is also set so that the actual font size is adjusted
to preserve the x-height across each row. Note how small text remains relatively legible across each row in the lower half.
<figure>
<img alt="text with and without 'font-size-adjust'" src="images/fontsizeadjust.png" >
<figcaption>Text with and without the use of 'font-size-adjust'</figcaption>
</figure>
This property allows authors to specify an <a>aspect value</a> for an element that
will effectively preserve the x-height of the first choice font, whether it is substituted
or not. Values have the following meanings:
<dl dfn-type=value dfn-for=font-size-adjust>
<dt><dfn id="font-size-adjust-none-value">none</dfn>
<dd>
Do not preserve the font's x-height.
<dt><dfn id="aspect-ratio-value"><var>&lt;number&gt;</var></dfn>
<dd>
Specifies the <a>aspect value</a> used in the calculation below to calculate the adjusted
font size:
<pre>c = ( a / a' ) s</pre>
where:
<pre>
s = font-size value
a = <a>aspect value</a> as specified by the 'font-size-adjust' property
a' = <a>aspect value</a> of actual font
c = adjusted font-size to use
</pre>
Negative values are invalid.
This value applies to any font that is selected but in typical usage it should be based
on the <a>aspect value</a> of the first font in the font-family list. If this is specified accurately,
the <code>(a/a')</code> term in the formula above is effectively 1 for the first font and no adjustment occurs.
If the value is specified inaccurately, text rendered using the first font in the family
list will display differently in older user agents that don't support 'font-size-adjust'.
</dl>
The value of 'font-size-adjust' affects the used value of 'font-size' but
does not affect the computed value. It affects the size of relative units
that are based on font metrics of the <a>first available font</a> such
as <code>ex</code> and <code>ch</code> but does not affect the size of
<code>em</code> units. Since numeric values of
<a href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a>
refer to the computed size of 'font-size', 'font-size-adjust' does not affect the used value of
<a href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a>.
Note: In CSS, authors often specify
<a href="https://www.w3.org/TR/CSS2/visudet.html#propdef-line-height">'line-height'</a>
as a multiple of the 'font-size'. Since the 'font-size-adjust'
property affects the used value of 'font-size', authors should take
care setting the line height when 'font-size-adjust' is used. Setting
the line height too tightly can result in overlapping lines of text
in this situation.
Authors can calculate the
<a>aspect value</a> for a given font by comparing spans with the same content but
different 'font-size-adjust' properties. If the same font-size is used, the spans will match when the 'font-size-adjust'
value is accurate for the given font.
<div class="example">
Two spans with borders are used to determine the <a>aspect value</a> of a font. The 'font-size' is the same for both spans but the
'font-size-adjust' property is specified only for the right span. Starting with a value of 0.5, the aspect
value can be adjusted until the borders around the two letters line up.
<pre>
p {
font-family: Futura;
font-size: 500px;
}
span {
border: solid 1px red;
}
.adjust {
font-size-adjust: 0.5;
}
&lt;p>&lt;span>b&lt;/span>&lt;span class="adjust">b&lt;/span>&lt;/p>
</pre>
<figure>
<img alt="Futura with an aspect value of 0.5" src="images/beforefontsizeadjust.png" >
<figcaption>Futura with an <a>aspect value</a> of 0.5</figcaption>
</figure>
The box on the right is a bit bigger than the one on the left, so the <a>aspect value</a> of this font is something less than 0.5.
Adjust the value until the boxes align.
</div>
<h3 id="font-prop">
Shorthand font property: the 'font' property</h3>
<pre class="propdef">
Name: font
Value: [ [ <<'font-style'>> || <<font-variant-css21>> || <<'font-weight'>> || <<font-stretch-css3>> ]? <<'font-size'>> [ / <<'line-height'>> ]? <<'font-family'>> ] | caption | icon | menu | message-box | small-caption | status-bar
Initial: see individual properties
Applies to: all elements
Inherited: yes
Percentages: see individual properties
Computed value: see individual properties
Media: visual
Animatable: see individual properties
</pre>
The 'font' property is,
except as described below,
a shorthand property for setting
'font-style', 'font-variant', 'font-weight', 'font-stretch', 'font-size', 'line-height', 'font-family'
at the same place in the stylesheet.
Values for the 'font-variant' property can also be included
but only those supported in CSS 2.1;
none of the 'font-variant' values added in this specification can be used in the 'font' shorthand:
<pre class="prod"><dfn id="font-variant-css21-values">&lt;font-variant-css21&gt;</dfn> = [normal | small-caps]</pre>
Values for the 'font-stretch' property can also be included but only those supported in
CSS Fonts level 3, none of the 'font-stretch' values added in this specification can be used in the 'font' shorthand:
<pre class="prod"><dfn id="font-stretch-css3-values">&lt;font-stretch-css3&gt;</dfn> = [normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded]</pre>
The syntax of this property is based on a traditional typographical
shorthand notation to set multiple properties related to fonts.
All subproperties of the 'font' property are first reset to their initial values,
including those listed above plus 'font-size-adjust', 'font-kerning', all subproperties of 'font-variant', 'font-feature-settings',
'font-language-override', 'font-min-size', 'font-max-size', 'font-optical-sizing', 'font-variation-settings', and 'font-palette'.
Then, those properties that are given explicit values in the 'font'
shorthand are set to those values. For a definition of allowed and
initial values, see the previously defined properties. For reasons of
backwards compatibility, it is not possible to set 'font-size-adjust'
to anything other than its initial value using the 'font'
shorthand property; instead, use the individual property.
<div class="example">
<pre>
p { font: 12pt/14pt sans-serif }
p { font: 80% sans-serif }
p { font: x-large/110% &quot;new century schoolbook&quot;, serif }
p { font: bold italic large Palatino, serif }
p { font: normal small-caps 120%/120% fantasy }
p { font: condensed oblique 12pt &quot;Helvetica Neue&quot;, serif; }
p { font: condensed oblique 25deg 753 12pt &quot;Helvetica Neue&quot;, serif; }
</pre>
In the second rule, the font size percentage value ("80%") refers
to the computed 'font-size' of the parent element. In the third rule, the line
height percentage ("110%") refers to the font size of the element
itself.
The first three rules do not specify the 'font-variant' and 'font-weight' explicitly, so these properties
receive their initial values (''font-variant/normal''). Notice that the font family
name ''"new century schoolbook"'', which contains spaces, is enclosed in
quotes. The fourth rule sets the 'font-weight' to ''bold'', the 'font-style' to ''italic'', and implicitly sets
'font-variant' to ''font-variant/normal''.
The fifth rule sets the 'font-variant' (''small-caps''), the 'font-size' (120% of the
parent's font size), the 'line-height' (120% of the font size) and the 'font-family'
(''fantasy''). It follows that the keyword <css>normal</css> applies to the two
remaining properties: 'font-style' and 'font-weight'.
The sixth rule sets the 'font-style', 'font-stretch', 'font-size', and 'font-family', the other font
properties being set to their initial values.
The seventh rule sets 'font-style' to ''oblique 25deg'', 'font-weight' to ''753'', and 'font-stretch' to ''condensed''.
Note that the ''25deg'' in this rule must be immediately following the "oblique" keyword.
View remainder of file in raw view