<ScrollArea type="always" scrollbars="vertical" style={{ height: 180 }}>
	<Box p="2" pr="8">
		<Heading size="4" mb="2" trim="start">
			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”. For instance, if a “b”
				and an “h”, or a “3” and an “8”, are difficult to distinguish at small
				sizes, this is a problem of legibility.
			</Text>

			<Text as="p">
				Typographers are concerned with legibility insofar as it is their job to
				select the correct font to use. Brush Script is an example of a font
				containing many characters that might be difficult to distinguish. The
				selection of cases influences the legibility of typography because using
				only uppercase letters (all-caps) reduces legibility.
			</Text>
		</Flex>
	</Box>
</ScrollArea>

<Flex direction="column" gap="2">
	<ScrollArea
		size="1"
		type="always"
		scrollbars="horizontal"
		style={{ width: 300, height: 12 }}
	>
		<Box width="800px" height="1px" />
	</ScrollArea>

	<ScrollArea
		size="2"
		type="always"
		scrollbars="horizontal"
		style={{ width: 350, height: 16 }}
	>
		<Box width="900px" height="1px" />
	</ScrollArea>

	<ScrollArea
		size="3"
		type="always"
		scrollbars="horizontal"
		style={{ width: 400, height: 20 }}
	>
		<Box width="1000px" height="1px" />
	</ScrollArea>
</Flex>

<Flex direction="column" gap="3">
	<ScrollArea
		radius="none"
		type="always"
		scrollbars="horizontal"
		style={{ width: 350, height: 20 }}
	>
		<Box width="800px" height="1px" />
	</ScrollArea>

	<ScrollArea
		radius="full"
		type="always"
		scrollbars="horizontal"
		style={{ width: 350, height: 20 }}
	>
		<Box width="800px" height="1px" />
	</ScrollArea>
</Flex>

<Grid columns="2" gap="2">
	<ScrollArea type="always" scrollbars="vertical" style={{ height: 150 }}>
		<Flex p="2" pr="8" direction="column" gap="4">
			<Text size="2" trim="both">
				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 size="2" trim="both">
				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". For instance, if a "b"
				and an "h", or a "3" and an "8", are difficult to distinguish at small
				sizes, this is a problem of legibility.
			</Text>
		</Flex>
	</ScrollArea>

	<ScrollArea type="always" scrollbars="horizontal" style={{ height: 150 }}>
		<Flex gap="4" p="2" width="700px">
			<Text size="2" trim="both">
				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 size="2" trim="both">
				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". For instance, if a "b"
				and an "h", or a "3" and an "8", are difficult to distinguish at small
				sizes, this is a problem of legibility.
			</Text>
		</Flex>
	</ScrollArea>
</Flex>