# Ω Text Style

Every experience designed for a screen needs a well-designed visual hierarchy to its content. The goal of a typographic hierarchy is to present material so that the most important things are displayed with the highest visual impact. This helps the user in their quick scan for key information on a screen. This is achieved through the types size, weight, color, contrast, consistency of location, alignment, and spacing from other elements on the screen.

To set the properties for type, in a Theme we use the Text Style which establishes a typographic scale of sizes for use in the base application. The text style we create is then referenced by all elements and components for consistency in the design. Design Tokens are used with the styling in place of inline styling in ALL aspects of the application.

The Text Style is used to establish different sized and spaced text on a progressive scale. Color, shadowing and other treatments are **not** handled at the Type Style level but exist in their own styling library or dictionary and applied as a property to elements and components.

<figure><img src="/files/158oqJPKnoeNHziT3v9f" alt=""><figcaption></figcaption></figure>

### Properties

These are the values that each font "type" carries as part of a grouping of "text" together as a "styling".

**Name**: \[textfield] The human readable way we refer to this "type" in the "type scale"

**Family**: \[selectList(Assets.Fonts)] The font family that is being used as the base. The list of available font families is pulled from the Assets > Fonts folder. Those fonts that have been uploaded into the system.

**Size**: \[slider-tick(1-99;12)] This is the digital pixel size of the font

**Weight**: \[selectList] This is the weights available for the font that is selected (i.e.. Normal, Bold, Medium, etc.)

**Transform**: \[selectList(Normal, Uppercase, Lowercase, Capitalized; Normal)] The ways that text should be changed in the end product, independent of how it was entered/read (i.e.. Normal, Uppercase, Lowercase, Capitalized)

**Style**: \[selectList(Normal, Underline, Italic, Line Through; Normal)] How the text should appear (i.e.. Normal, Underline, Italic, Line Through)

**Line Height**: \[slider-tick(0-99;150% of size above)] The height of text when line wraps are used. The rule of thumb for fonts is to set the line height at approximately 150% of the font size, as a starting point.

**Letter Spacing**: \[slider-tick(-50 to 50;0)] To alter the space between characters in logical pixels we use letter spacing. These can be positive and negative numbers with the default being zero or what the font otherwise carries for a value.

**Referenced By**: \[textArea.ReadOnlyCsvList] The list of elements and components that are referencing this dictionary

**Token**: \[textfield(#)] The short-code we use to refer to this type (i.e.. #H1, #H2, #R1, #R2 , #R4B etc.)

### Base Type Scale

| **Name**       | **Family** | **Size** | **Weight** | **Transform** | **Style** | **Line Height** | **Letter Spacing** | **Token** |
| -------------- | ---------- | -------- | ---------- | ------------- | --------- | --------------- | ------------------ | --------- |
| Header 1       | Lato       | 40       | Regular    | Normal        | Normal    | 48              | 0                  | #H1       |
| Header 2       | Lato       | 32       | Regular    | Normal        | Normal    | 40              | 0                  | #H2       |
| Header 3       | Lato       | 24       | Regular    | Normal        | Normal    | 32              | 0                  | #H3       |
| Regular 1      | Lato       | 20       | Regular    | Normal        | Normal    | 24              | 0                  | #R1       |
| Regular 1 Bold | Lato       | 20       | Bold       | Normal        | Normal    | 24              | 0                  | #R1B      |
| Regular 2      | Lato       | 16       | Regular    | Normal        | Normal    | 24              | 0                  | #R2       |
| Regular 2 Bold | Lato       | 16       | Bold       | Normal        | Normal    | 24              | 0                  | #R2B      |
| Regular 3      | Lato       | 14       | Regular    | Normal        | Normal    | 16              | 0                  | #R3       |
| Regular 3 Bold | Lato       | 14       | Bold       | Normal        | Normal    | 16              | 0                  | #R3B      |
| Regular 4      | Lato       | 12       | Regular    | Normal        | Normal    | 16              | 0                  | #R4       |
| Regular 4 Bold | Lato       | 12       | Bold       | Normal        | Normal    | 16              | 0                  | #R4B      |

### JSON

The file for the font we use in the base design system (Lato) can be found under the folder properties > styles > font.json. That file points to the location of that font asset in the style. It doesn't provide the sizing of the text to be used in the design system. The text size used in the design is referenced in the styles > size > font.json where you will see the sizes for other objects in the design system listed as their own json files.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://able.bucca.com/overview/styles/typography.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.