# Typography
# Global settings
HiQ sets several global typographic settings:
- Adjustments of font size after orientation changes on some mobile devices is prevented by setting
text-size-adjust
to100%
. text-rendering
is set tooptimizeLegiblity
to emphasize legibility over rendering speed or geometric precision. This enables kerning and optional ligatures.
Some additional options are set globally and are customizable with custom properties.
Property Name (global/local) | Description |
---|---|
--hiq-text-rendering | Sets the text-rendering property that tells the browser what to optimize for when rendering text. |
--hiq-letter-spacing-base | The default letter-spacing assigned to the entire document. |
--hiq-text-color | Sets the default color for all text in the document, including body copy and headings. |
# Font families
By default, a native font stack is used as the font family on the html
element, which allows for optimum text rendering on every device and operating system.
:root {
--hiq-base-font-family:
/* Safari for OS X and iOS (San Francisco) */
-apple-system,
/* Chrome < 56 for OS X (San Francisco) */
BlinkMacSystemFont,
/* Windows */
'Segoe UI',
/* Android */
'Roboto',
/* Basic web fallback */
'Helvetica Neue', Arial, sans-serif;
}
The --hiq-base-font-family
is defined on the html
element and automatically inherited through HiQ. You can change the global font-family
as well as monospace family, which is used on code elements.
Property Name (global/local) | Description |
---|---|
--hiq-font-family-base | Sets the default font family used for all elements, except for code, kbd, samp and pre. |
--hiq-font-family-monospace | Sets the default monospaced font family, used in code, kbd, samp and pre elements. |
# Adding Font Families
If you are using additional font families, for example a serif family, simply add a new custom property:
:root {
--font-family-serif: 'Chronicle Display', 'Lucida Grande', Verdana, Helvetica, sans-serif;
}
TIP
We recommend that you similarly add a new custom property for each new font stack you plan to use.
# Responsive typography
Typography in HiQ is truly fluid, meaning that it is not simply defined at various breakpoints, but is a function of viewport width.
The root font size, set on the html
element is determined by a formula that looks like this:
min font size + (max font size - min font size) * (viewport width - lower font range) / (upper font range - lower font range)
There are four values you can customize that will tweak the behavior of the responsive type.
Property Name (global/local) | Description |
---|---|
--hiq-unitless-min-font-size | The minimum font size in pixels. Type will be no smaller than this. Must not include the term 'px'. |
--hiq-unitless-max-font-size | The maximum font size in pixels. Type will be no larger than this. Must not include the term 'px'. |
--hiq-unitless-lower-font-range | The viewport width in pixels at which font size starts increasing. At smaller widths, type remains static. Must not include the term 'px'. |
--hiq-unitless-upper-font-range | The viewport width in pixels at which font size stops increasing. At larger widths, type remains static. Must not include the term 'px'. |
In order to fully alter this behavior, you must be pulling in the source HiQ files into your project with PostCSS. This will allow you to change two custom media queries that set lower and upper bounds on the type size changes.
Simply include these two custom media query definitions as you would custom properties, and change them to match your --hiq-unitless-lower-font-range
and hiq-unitless-upper-font-range
values, with the addition of px
units.
/* matches value of --hiq-unitless-lower-font-range */
@custom-media --hiq-lower-font-range (min-width: 460px);
/* matches value of --hiq-unitless-upper-font-range */
@custom-media --hiq-upper-font-range (min-width: 900px);
TIP
We recommend setting the --hiq-upper-font-range
to the same value as your max computed container size.
Here's a full example:
:root {
/* my max container width */
--hiq-max-container-width: 50rem;
/* my minimum font size */
--hiq-unitless-min-font-size: 15;
/* my maximum font size */
--hiq-unitless-max-font-size: 18;
/* below this point, the minimum font size will be used */
--hiq-unitless-lower-font-range: 460;
/*
above this point, the maximum font size will be used
I get 900 by multiplying 50 (max container width) by 18px (max font size)
*/
--hiq-unitless-upper-font-range: 900;
}
/* matches my lower font range */
@custom-media --hiq-lower-font-range (min-width: 460px);
/* matches my upper font range */
@custom-media --hiq-upper-font-range (min-width: 900px);
# Type scale
Six type sizes are provided by default. These correspond to the six heading levels, but are not necessarily heading sizes and can be used anywhere.
.is-size-1
through .is-size-6
classes are available. They are also available as mixins, if you are using the source files with PostCSS.
Font size 1
Font size 2
Font size 3
Font size 4
Font size 5
Font size 6
<p class="is-size-1">Font size 1</p>
<p class="is-size-2">Font size 2</p>
<p class="is-size-3">Font size 3</p>
<p class="is-size-4">Font size 4</p>
<p class="is-size-5">Font size 5</p>
<p class="is-size-6">Font size 6</p>
@mixin is-size-1;
@mixin is-size-2;
@mixin is-size-3;
@mixin is-size-4;
@mixin is-size-5;
@mixin is-size-6;
--hiq-font-size-base
controls the default sizing on the html
element. --hiq-font-size-large
and --hiq-font-size-small
provide additional, semantically clear sizing options.
@mixin is-size-large;
@mixin is-size-small;
Primary sizes are defined with rems
, which are relative to the root font size defined on the html
element (see above for information about the responsive nature of this root size). Min/max font sizes are defined with px
.
Property Name (global/local) | Description |
---|---|
--hiq-font-size-1 | First and largest size in the type scale. Applied by default to the h1 element. |
--hiq-font-size-2 | Second size in the type scale. Applied by default to the h2 element. |
--hiq-font-size-3 | Third size in the type scale. Applied by default to the h3 element. |
--hiq-font-size-4 | Fourth size in the type scale. Applied by default to the h4 element. |
--hiq-font-size-5 | Fifth size in the type scale. Applied by default to the h5 element. |
--hiq-font-size-6 | Sixth size in the type scale. Applied by default to the h6 element. |
--hiq-font-size-base | Base font size for document. All inline elements and paragraphs receive this type size by default. |
--hiq-font-size-large | Size slightly larger than the base font size. Set to the fourth font size by default. |
--hiq-font-size-small | Size slightly smaller than the base font size. The small element is assigned this size. Set to the sixth font size by default. |
--hiq-min-font-size-1 | The minimum size (in px) that the first font size can reach. Set to the primary first font size by default. |
--hiq-max-font-size-1 | The maximum size (in px) that the first font size can reach. Set to the primary first font size by default. |
--hiq-min-font-size-2 | The minimum size (in px) that the second font size can reach. Set to the primary second font size by default. |
--hiq-max-font-size-2 | The maximum size (in px) that the second font size can reach. Set to the primary second font size by default. |
--hiq-min-font-size-3 | The minimum size (in px) that the third font size can reach. Set to the primary third font size by default. |
--hiq-max-font-size-3 | The maximum size (in px) that the third font size can reach. Set to the primary third font size by default. |
--hiq-min-font-size-4 | The minimum size (in px) that the fourth font size can reach. Set to the primary fourth font size by default. |
--hiq-max-font-size-4 | The maximum size (in px) that the fourth font size can reach. Set to the primary fourth font size by default. |
--hiq-min-font-size-5 | The minimum size (in px) that the fifth font size can reach. Set to the primary fifth font size by default. |
--hiq-max-font-size-5 | The maximum size (in px) that the fifth font size can reach. Set to the primary fifth font size by default. |
--hiq-min-font-size-6 | The minimum size (in px) that the sixth font size can reach. Set to the primary sixth font size by default. |
--hiq-max-font-size-6 | The maximum size (in px) that the sixth font size can reach. Set to the primary sixth font size by default. |
If these six sizes are not enough for your project, simply add additional custom properties and use as needed.
:root {
--font-size-7: 0.75rem;
}
# Size clamping New in 4.0.0
In browsers that support the CSS clamp()
function (opens new window), font sizes can be controlled with greater specificity.
Let's say you generally like the default fluid sizing for --hiq-font-size-1
, but you would prefer it didn't get any larger than 40px
. You can set that value as --hiq-max-font-size-1
. Similarly, let's say you don't want --hiq-font-size-6
to get any smaller than 16px
. Set that value as --hiq-max-font-size-6
.
--hiq-max-font-size-1: 40px;
--hiq-min-font-size-6: 16px;
These settings are designed for instances where you generally like the fluid type scale you've already set up, but want to fine tune the details. These values should always be set in pixels.
# Headings
All HTML headings, <h1>
through <h6>
, are sized according to the six provided type sizes.
Heading | Example |
---|---|
<h1></h1> | Heading 1 |
<h2></h2> | Heading 2 |
<h3></h3> | Heading 3 |
<h4></h4> | Heading 4 |
<h5></h5> | Heading 5 |
<h6></h6> | Heading 6 |
Property Name (global/local) | Description |
---|---|
--hiq-heading-font-weight | The font weight assigned to h1, h2, h3, h4, h5, and h6 elements. |
# Line height
Base line height is defined on the html
element with the --hiq-line-height-base
custom property. Headings (h1
through h6
) receive a variant line height defined by --hiq-heading-line-height
.
Property Name (global/local) | Description |
---|---|
--hiq-line-height-base | Base line height for all elements, except for headings. |
--hiq-heading-line-height | Line height for h1, h2, h3, h4, h5, and h6 elements. |
# Font weights
By default, font weights are set to the most common values defined for web fonts. These can be customized using custom properties.
Custom properties are also used to apply the font weights to various elements. By default, --hiq-font-weight-normal
is set on the html
element. This is defined by the --hiq-font-weight-base
custom property.
Property Name (global/local) | Description |
---|---|
--hiq-font-weight-light | The lightest weight in the default font weight range. |
--hiq-font-weight-normal | Corresponds to a 'normal' font weight. The majority of elements receive this weight by default. |
--hiq-font-weight-medium | A slightly heavier weight than normal. |
--hiq-font-weight-semibold | The second-to-heaviest weight in the default font weight range. |
--hiq-font-weight-bold | The heaviest weight in the default font weight range. |
--hiq-font-weight-base | The font weight assigned to the majority of elements. This is set to the normal font weight by default. |
# Inline text elements
Styling for common inline HTML5 elements:
Element | Example |
---|---|
<strong><b> | This is strong text |
<em><i> | This is emphasized text |
<u> | This is underlined text |
<s> | |
<small> | This is small text |
<sup> | This is superscript text |
<sub> | This is subscript text |
<var> | This is variable text |
<dfn> | This is definition text |
<abbr> | This is abbreviation text |
<del> | |
<ins> | This is inserted text |
<mark> | This is marked text |
Property Name (global/local) | Description | |
---|---|---|
--hiq-mark-color | Sets the background color for the mark element, which represents highlighted text. | |
--hiq-deleted-color | Sets the background color for the del element, which represents a range of text that has been deleted for the document. | |
--hiq-inserted-color | Sets the background color for the ins element, which represents a range of text that has been added to the document. |
# User selection
The background color of a user's selection can be customized using the --hiq-selection-color
custom property.
Property Name (global/local) | Description | |
---|---|---|
--hiq-selection-color | Sets the background color for a user selection within the document. |
# Address
The <address>
element is updated to reset the browser default font-style
from italic to normal. line-height
is also now inherited, and margin-bottom: 1rem
has been added.
2518 W Armitage Ave
Chicago IL 60647
P: (123) 456-7890
<address>
<strong>WHQ</strong><br>
2518 W Armitage Ave<br>
Chicago IL 60647<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
# Lists
All lists—<ul>
, <ol>
, and <dl>
—have their margin-top
removed and margin-bottom: 1rem
added. Nested lists have no margin-bottom
.
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
- Nested list item 1
- Nested list item 2
- Nested list item 3
- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
<li>Unordered list item 3
<ul>
<li>Nested list item 1</li>
<li>Nested list item 2</li>
<li>Nested list item 3</li>
</ul>
</li>
</ul>
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
<li>Ordered list item 3</li>
</ol>
Property Name (global/local) | Description |
---|---|
--hiq-list-margin-left --list-margin-left | Sets the left margin for ul and ol elements. |
--hiq-unordered-list-style --unordered-list-style | Sets the bullet style for ul elements. |
# Unstyled
Remove the default list-style
and margin-left
on list items (immediate children only) with .is-unstyled
. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.
- Unstyled list item 1
- Unstyled list item 2
- Unstyled list item 3
- Nested list item 1
- Nested list item 2
- Nested list item 3
- Unstyled list item 4
- Unstyled list item 5
- Unstyled list item 6
<ul class="is-unstyled">
<li>Unstyled list item 1</li>
<li>Unstyled list item 2</li>
<li>Unstyled list item 3
<ul>
<li>Nested list item 1</li>
<li>Nested list item 2</li>
<li>Nested list item 3</li>
</ul>
</li>
<li>Unstyled list item 4</li>
<li>Unstyled list item 5</li>
<li>Unstyled list item 6</li>
</ul>
There is also a mixin available for this:
ul {
@mixin is-unstyled;
}
# Description Lists
For simpler styling, clear hierarchy, and better spacing, description lists have updated margins. By default, <dd>
s reset margin-left
to 0
and add margin-bottom: 0.5rem
. <dt>
s are bolded.
- Description term
- Description
- Another description term
- Nested description term
- Description
<dl>
<dt>Description term</dt>
<dd>Description</dd>
<dt>Another description term</dt>
<dd>
<dl>
<dt>Nested description term</dt>
<dd>Description</dd>
</dl>
</dd>
</dl>
Property Name (global/local) | Description |
---|---|
--hiq-description-list-title-font-weight --description-list-title-font-weight | The font weight assigned to the dt element. |
# Blockquote
For quoting blocks of content from another source within your document. Wrap <blockquote>
around any HTML as the quote.
Wrap the name of the source of the quote in <cite>
.
A block quotation is a quotation that is offset from the main text as a paragraph, or block of text.
Quote citation
<blockquote>
<p>A block quotation is a quotation that is offset from the main text as a paragraph, or block of text.</p>
<cite>Quote citation</cite>
</blockquote>
Property Name (global/local) | Description |
---|---|
--hiq-blockquote-font-size --blockquote-font-size | Sets the font-size for the p element within a blockquote. |
--hiq-blockquote-line-height --blockquote-line-height | Sets the line-height for the p element within a blockquote. |
--hiq-blockquote-citation-color --blockquote-citation-color | Sets the color for the cite element within a blockquote. |
# Horizontal rules
Use the hr
element to visually separate sections of content. The thickness of the rule can be controlled with the --hiq-horizontal-rule-height
custom property.
Property Name (global/local) | Description |
---|---|
--hiq-horizontal-rule-height --horizontal-rule-height | Sets the thickness of a horizontal rule. |
--hiq-horizontal-rule-color --horizontal-rule-color | Sets the color of a horizontal rule. |
# Links
Links receive different text colors based on their state (static, hover
, focus
, and active
). By default, hover
, focus
and active
receive the same color, but this can be customized with custom properties.
The underline beneath links is removed by default, in favor of a color change and outline effect. This can be changed with a custom property.
Property Name (global/local) | Description |
---|---|
--hiq-link-color --link-color | Sets the text color for static state anchor elements. |
--hiq-link-hover-color --link-hover-color | Sets the text color for hovered anchor elements. |
--hiq-link-active-color --link-active-color | Sets the text color for active anchor elements. |
--hiq-link-visited-color --link-visited-color | Sets the text color for visited anchor elements. |
--hiq-link-visited-hover-color --link-visited-hover-color | Sets the text color for hovered visited anchor elements. |
--hiq-link-visited-active-color --link-visited-active-color | Sets the text color for active visited anchor elements. |
--hiq-link-text-decoration --link-text-decoration | Sets the text decoration (underlined or otherwise) for anchor elements. |
# Typography Utilities
# Truncated Text
If text overflows its container and needs to be truncated with an ellipsis, you can use the .has-text-truncated
utility class, or the matching mixin.
This run-on sentence is an extremely long sentence, and in all likelihood will probably need to be truncated.
<p class="has-text-truncated">
This run-on sentence is an extremely long sentence, and in all likelihood will probably need to be truncated.
</p>
p {
@mixin has-text-truncated;
}
# Details
Use the details
element, along with its corresponding summary
element to allow a user to retrieve additional information.
Summary (click for details)
Details
<details>
<summary>Summary (click for details)</summary>
<p>Details</p>
</details>