Scroll Area

<script setup lang="ts">
import { ScrollArea } from '@typlog/ui'
</script>

<template>
  <ScrollArea type="always" scrollbars="vertical" style="height: 180px">
    <div class="pr-4">
      <h2 class="text-xl font-bold mb-4">Principles of the typographic craft</h2>
      <p class="mb-4">
        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.
      </p>
      <p class="mb-4">
        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.
      </p>
      <p class="mb-4">
        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.
      </p>
    </div>
  </ScrollArea>
</template>