Typography
Two families, five weights, a scale that starts at a 10.5 pt body, and the criteria the text is set with.
Arcasiles Group uses two families: BDSupperBold for headings and large figures, Lexend for everything you read line by line. There is no third one. When in doubt, use Lexend. Below you have the full scale —web and slide— with the size, the weight and the color of every token.
BDSupperBold — display
Cover titles, large figures and button labels. Not in body copy: that is Lexend's job, and it carries the five weights.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ 0123456789 ¿? ¡! & —
Lexend — text
Running text, labels, footers and data. Five weights: 300, 400, 500, 600 and 700.
abcdefghijklmnñopqrstuvwxyz 0123456789 ¿? ¡! & —
300400500600700
The scale, live
Every row is set at the exact size the v5.0.1 canon fixes, not an approximation. What you see here is what the template exports.
#f5f5f5 #272727 #5d5d5d #afafaf Line-height & minimums
- display line-height
- 1.1
- heading line-height
- 1.25
- body line-height
- 1.6
- legibility minimum
- 8 pt
How the text is set
A well-written text can still fail to be read. These are the criteria Arcasiles Group sets its own text with, for the branding and for each product, and they come from book typography. The sizes and the leading are the ones in the scale above; the contrast floor is set by the Accessibility chapter.
Color adds emphasis; weight and size carry the structure. A color is shown in its own color, and links carry an underline offset from the baseline. The minimum for all of it is the AA contrast set in the Accessibility chapter .
Legibility criteria
-
The measure. 45–75 characters per line, with ~66 as the optimum.
Why Wider, the eye loses its way back to the left margin; narrower, too many line breaks tire it.
-
Hierarchy by weight and size. Color is emphasis, not structure.
Why Weight and size read on any surface —print, color blindness, dark mode—; color does not.
-
Balance the line endings.
text-wrap: prettyin body,balancein headings; control widows and orphans.Why A stranded word closing a paragraph or a lopsided split heading breaks the rhythm right where the eye rests.
-
Mark data in its form. A hex is shown in its color; links carry an offset underline.
Why Showing a datum in its own form —the color of the color, an underline that never touches the letters— makes it legible without ornament.
The hex shows its own color, and the label tone comes from WCAG contrast: yellow is never text. -
Paragraph rhythm and comfortable lists. Short paragraphs, flag-indented lists with a clear marker.
Why Breaks and indents give the eye rest points and re-entry points so it never gets lost in the block.
Full specification (web & slide)
Web scale (scale_web_pt)
| Token | Family | Size | Color | Use |
|---|---|---|---|---|
| coverTitle | Lexend 700 | 34 pt | #272727 | Cover headline (A4) |
| h1 | BDSupperBold | 24 pt | #272727 | Page titles |
| h2 | Lexend 600 | 13 pt | #272727 | Document sections |
| h3 | Lexend 600 | 11 pt | accent | #272727 | Subsections |
| body | Lexend 400 | 10.5 pt | #272727 | Running text |
| bodyEmphasis | Lexend 600 | 10.5 pt | — | Emphasized body |
| tableCell | Lexend 400 | 9.5 pt | — | Table cells |
| badge | Lexend 600 | 9 pt | #f5f5f5 | Badges |
| caption | Lexend 300 | 9 pt | #afafaf | Notes & footers |
| metricValue | BDSupperBold | 28 pt | accent | Metric value |
| benefitNumber | BDSupperBold | 22 pt | accent | Benefit number |
| ctaTitle | BDSupperBold | 40 pt | #f5f5f5 | CTA title |
| copyright | Lexend 400 | 8 pt | #afafaf | Copyright |
| subtitle | Lexend 400 | 14 pt | #5d5d5d | Document subtitle under h1 (A4); closes the 24 pt → 13 pt gap |
| mono | System monospace (ui-monospace / Menlo / Consolas) | 8 pt | — | Data & code — functional exception, not a brand font |
Legibility minimum: 8 pt. “accent” is the active emphasis color; on light backgrounds it is written in its text-safe tone (--arc-accent-strong), because raw yellow cannot be read.
Slide scale (scale_slide_pt)
| Token | Family | Size | Color | Use |
|---|---|---|---|---|
| slideTitle | BDSupperBold | 30 pt | #272727 | Slide title |
| slideSubtitle | Lexend 400 | 16 pt | #5d5d5d | Slide subtitle |
| slideH2 | Lexend 700 | 20 pt | #272727 | Section title |
| slideBody | Lexend 400 | 13 pt | #272727 | Slide body |
| slideCaption | Lexend 300 | 10 pt | #5d5d5d | Footnotes |
Scale for 16:9 presentations (PPTX / SlidePage, 254 × 142.9 mm canvas). Same hierarchy as A4, larger bodies for reading distance.