💻

For Developers

Integrate LexiCipher into your website or application

Quick Start

Add the LexiCipher font and apply user-optimized settings via CSS:

/* 1. Load the font */
@font-face {
  font-family: 'LexiCipher';
  src: url('/fonts/LexiCipher-Variable.ttf') format('truetype');
  font-weight: 100 900;
}

/* 2. Apply user settings (from JSON export) */
.readable-text {
  font-family: 'LexiCipher', sans-serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  line-height: 1.6;
  font-variation-settings: "BWGT" 65;
  max-width: 65ch;
}

Using Exported Settings

Users can export their optimized settings as JSON. Here's the format:

{
  "css": {
    "fontSize": "18px",
    "letterSpacing": "0.05em",
    "wordSpacing": "0.1em",
    "lineHeight": "1.6",
    "fontWeight": 450,
    "fontVariationSettings": "\"BWGT\" 65",
    "maxWidth": "65ch"
  },
  "version": "1.0",
  "exportedAt": "2025-01-28T..."
}

Parse this JSON and apply the CSS values directly to your content containers.

Variable Font Axes

LexiCipher is a variable font with these axes:

Axis	Tag	Range	Default
Weight	`wght`	100–900	400
Bottom Weight	`BWGT`	0–100	50

BWGT (Bottom Weight): A custom axis that adds weight to the bottom portion of characters, creating a visual anchor that can improve reading stability for some users.

Accessibility Considerations

✓Allow users to override your defaults with their own settings
✓Respect prefers-reduced-motion for any animations
✓Maintain sufficient color contrast (WCAG 2.1 AA minimum)
✓Don't force fixed widths—let text reflow on different screens
✓Store user preferences locally (localStorage) for persistence

Open Source

LexiCipher is open source. View the code, report issues, or contribute on GitHub.

View on GitHub