> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.bigcommerce.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.bigcommerce.com/_mcp/server.

# Typography

Typography allows users to select between either a default widget appearance or a custom appearance.

---

**Widget Configuration Output**

```json showLineNumbers={false}
{
  "textStyle": "default"
}
```

> **Note**
>
> We recommend exposing custom typography settings via the `conditionalSettings` attribute when “custom” is selected.

---

**User Interface Output**

![output](/_fern-img/fe5d9c47e6f5c8be09f238515d1ce72b460215e5f9adae0d7e1559593c4e49cc.webp)

---

**JSON Schema**

| Property                                   | Type   | Description                                                                         | Example    |
| ------------------------------------------ | ------ | ----------------------------------------------------------------------------------- | ---------- |
| `type`                                     | string | The type of setting component to display.                                           | typography |
| `label`                                    | string | The user friendly message to inform the user how this setting will be used.         | Text style |
| `id`                                       | string | The variable name where the setting value will be available in the widget template. | textStyle  |
| `default`                                  | string | The default value to use when rendering the widget for the first time.              | default    |
| `typeMeta`                                 | object | Additional information needed based on the selected setting type.                   |            |
| `typeMeta.conditionalSettings`             | array  | List of settings revealed if the condition attribute condition is met.              |            |
| `typeMeta.conditionalSettings[].condition` | string | Condition needed inorder to reveal optional settings.                               | custom     |
| `typeMeta.conditionalSettings[].settings`  | array  | Include additional settings                                                         |            |