Principles of the typographic craft
Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense "legible" and "readable" are often used synonymously, typographically they are separate but related concepts.
Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as "the quality of being decipherable and recognisable".
Typographers are concerned with legibility insofar as it is their job to select the correct font to use.
<.scroll_area id="docs-scroll-area-hero" type="always" scrollbars="vertical" style="height: 180px">
<.box p="2" pr="8">
<.heading size="4" mb="2">Principles of the typographic craft</.heading>
<.flex direction="column" gap="4">
<.text as="p">
Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense "legible" and "readable" are often used synonymously, typographically they are separate but related concepts.
</.text>
<.text as="p">
Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as "the quality of being decipherable and recognisable".
</.text>
<.text as="p">
Typographers are concerned with legibility insofar as it is their job to select the correct font to use.
</.text>
</.flex>
</.box>
</.scroll_area>API Reference
This component inherits behavior from the Scroll Area primitive and supports common margin props.
| Prop | Type | Default | Description |
|---|---|---|---|
bottom
|
string
|
—
|
CSS bottom property. Accepts scale values, CSS strings, responsive. |
class
|
string
|
nil
|
|
flex_basis
|
string
|
—
|
CSS flex-basis property. Responsive supported. |
flex_grow
|
string
|
—
|
CSS flex-grow property. Responsive supported. |
flex_shrink
|
string
|
—
|
CSS flex-shrink property. Responsive supported. |
grid_area
|
string
|
—
|
CSS grid-area property. Responsive supported. |
grid_column
|
string
|
—
|
CSS grid-column property. Responsive supported. |
grid_column_end
|
string
|
—
|
CSS grid-column-end property. Responsive supported. |
grid_column_start
|
string
|
—
|
CSS grid-column-start property. Responsive supported. |
grid_row
|
string
|
—
|
CSS grid-row property. Responsive supported. |
grid_row_end
|
string
|
—
|
CSS grid-row-end property. Responsive supported. |
grid_row_start
|
string
|
—
|
CSS grid-row-start property. Responsive supported. |
height
|
any
|
—
|
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
id
|
string
|
nil
|
|
inset
|
string
|
—
|
CSS inset property. Accepts scale values, CSS strings, responsive. |
left
|
string
|
—
|
CSS left property. Accepts scale values, CSS strings, responsive. |
m
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
max_height
|
any
|
—
|
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
max_width
|
any
|
—
|
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
mb
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
min_height
|
any
|
—
|
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
min_width
|
any
|
—
|
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
ml
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mr
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mt
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mx
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
my
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
overflow
|
string
|
—
|
CSS overflow property. Responsive supported. |
overflow_x
|
string
|
—
|
CSS overflow-x property. Responsive supported. |
overflow_y
|
string
|
—
|
CSS overflow-y property. Responsive supported. |
p
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pb
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pl
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
position
|
string
|
—
|
CSS position property. Responsive supported. |
pr
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pt
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
px
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
py
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
radius
|
string
|
—
|
Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. |
right
|
string
|
—
|
CSS right property. Accepts scale values, CSS strings, responsive. |
scroll_hide_delay
|
integer
|
nil
|
|
scrollbars
|
string
|
"both"
|
|
size
|
string
|
"1"
|
|
style
|
string
|
nil
|
|
top
|
string
|
—
|
CSS top property. Accepts scale values, CSS strings, responsive. |
type
|
string
|
"hover"
|
|
width
|
any
|
—
|
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
bottom
CSS bottom property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
class
Type
string
Default
nil
flex_basis
CSS flex-basis property. Responsive supported.
Type
string
Default
—
flex_grow
CSS flex-grow property. Responsive supported.
Type
string
Default
—
flex_shrink
CSS flex-shrink property. Responsive supported.
Type
string
Default
—
grid_area
CSS grid-area property. Responsive supported.
Type
string
Default
—
grid_column
CSS grid-column property. Responsive supported.
Type
string
Default
—
grid_column_end
CSS grid-column-end property. Responsive supported.
Type
string
Default
—
grid_column_start
CSS grid-column-start property. Responsive supported.
Type
string
Default
—
grid_row
CSS grid-row property. Responsive supported.
Type
string
Default
—
grid_row_end
CSS grid-row-end property. Responsive supported.
Type
string
Default
—
grid_row_start
CSS grid-row-start property. Responsive supported.
Type
string
Default
—
height
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
id
Type
string
Default
nil
inset
CSS inset property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
left
CSS left property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
m
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
max_height
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
max_width
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
mb
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
min_height
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
min_width
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
ml
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mr
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mt
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mx
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
my
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
overflow
CSS overflow property. Responsive supported.
Type
string
Default
—
overflow_x
CSS overflow-x property. Responsive supported.
Type
string
Default
—
overflow_y
CSS overflow-y property. Responsive supported.
Type
string
Default
—
p
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pb
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pl
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
position
CSS position property. Responsive supported.
Type
string
Default
—
pr
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pt
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
px
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
py
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
radius
Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
Type
string
Default
—
right
CSS right property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
scroll_hide_delay
Type
integer
Default
nil
scrollbars
Type
string
Default
"both"
size
Type
string
Default
"1"
style
Type
string
Default
nil
top
CSS top property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
type
Type
string
Default
"hover"
width
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
Examples
Size
Use the size prop to control the size of the scrollbar handles.
<.flex direction="column" gap="2">
<.scroll_area
id="docs-scroll-area-size-1"
size="1"
type="always"
scrollbars="horizontal"
style="width: 300px; height: 12px"
>
<.box width="800px" height="1px" />
</.scroll_area>
<.scroll_area
id="docs-scroll-area-size-2"
size="2"
type="always"
scrollbars="horizontal"
style="width: 350px; height: 16px"
>
<.box width="900px" height="1px" />
</.scroll_area>
<.scroll_area
id="docs-scroll-area-size-3"
size="3"
type="always"
scrollbars="horizontal"
style="width: 400px; height: 20px"
>
<.box width="1000px" height="1px" />
</.scroll_area>
</.flex>Radius
Use the radius prop to assign a specific radius to the handles.
<.flex direction="column" gap="3">
<.scroll_area
id="docs-scroll-area-radius-none"
radius="none"
type="always"
scrollbars="horizontal"
style="width: 350px; height: 20px"
>
<.box width="800px" height="1px" />
</.scroll_area>
<.scroll_area
id="docs-scroll-area-radius-full"
radius="full"
type="always"
scrollbars="horizontal"
style="width: 350px; height: 20px"
>
<.box width="800px" height="1px" />
</.scroll_area>
</.flex>Scrollbars
Use the scrollbars prop to limit scrollable axes.
Three fundamental aspects of typography are legibility, readability, and aesthetics.
Legibility describes how easily individual characters can be distinguished from one another.
Three fundamental aspects of typography are legibility, readability, and aesthetics.
Legibility describes how easily individual characters can be distinguished from one another.
<.grid columns="2" gap="2">
<.scroll_area
id="docs-scroll-area-vertical"
type="always"
scrollbars="vertical"
style="height: 150px"
>
<.flex p="2" pr="8" direction="column" gap="4">
<.text size="2">
Three fundamental aspects of typography are legibility, readability, and aesthetics.
</.text>
<.text size="2">
Legibility describes how easily individual characters can be distinguished from one another.
</.text>
</.flex>
</.scroll_area>
<.scroll_area
id="docs-scroll-area-horizontal"
type="always"
scrollbars="horizontal"
style="height: 150px"
>
<.flex gap="4" p="2" style="width: 700px">
<.text size="2">
Three fundamental aspects of typography are legibility, readability, and aesthetics.
</.text>
<.text size="2">
Legibility describes how easily individual characters can be distinguished from one another.
</.text>
</.flex>
</.scroll_area>
</.grid>