Typography
Relevant source files
The following files were used as context for generating this wiki page:
Typography in the FOSSBilling branding project defines the visual identity of the brand wordmark and associated labels. The project utilizes the Manrope typeface to ensure consistent lettering across logo assets and generated previews. While master assets use converted paths for portability, the underlying font source is maintained for editing and preview generation.
Sources: README.md:34-40, scripts/create-preview.ts:8-10
Manrope Typeface
The FOSSBilling wordmark specifically uses the Manrope variable font. The typeface is a sans-serif family distributed under the SIL Open Font License 1.1.
Specifications
The wordmark employs specific weights for different parts of the brand name:
- FOSS: Weight 700 (Bold)
- Billing: Weight 450 (Medium)
- Letter Spacing: Default
Sources: README.md:46-48, source/fonts/Manrope/OFL.txt:1-12
Font Licensing
The Font Software is licensed under the SIL Open Font License (OFL). This allows for free use, modification, and redistribution, provided the font itself is not sold. The FOSSBilling branding copyright remains separate from the font license.
Sources: source/fonts/Manrope/OFL.txt:14-25, README.md:47-48
Implementation and Processing
The typography system manages two states: editable live text and production-ready vector paths.
Asset Generation Logic
To ensure consistent rendering without requiring external font installations, the asset generation script strictly enforces the use of outlined lettering for production SVGs.
The script scans SVG sources for <text> tags and rejects files that have not been converted to paths.
Sources: scripts/generate-assets.ts:106-115, README.md:34-36
Preview Generation
While production logos use paths, the create-preview.ts script utilizes the source variable font to generate descriptive labels on the branding asset preview.
| Usage | Implementation | Source File |
|---|---|---|
| Main Title | Manrope Size 26 | scripts/create-preview.ts |
| Subtitles | Manrope Size 15 | scripts/create-preview.ts |
| Row Labels | Manrope Size 18 | scripts/create-preview.ts |
| Technical Labels | Manrope Size 13 | scripts/create-preview.ts |
Sources: scripts/create-preview.ts:25-50
Editing Workflow
Maintaining typography consistency requires specific software and font installation.
- Installation: You must install the
Manrope-VariableFont_wght.ttffound insource/fonts/Manrope/. - Modification: You edit the
fossbilling-logo-text.svgfile using software with variable-font support (e.g., Inkscape or Adobe Illustrator). - Path Conversion: You save a copy as
fossbilling-logo.svgwith all text converted to paths. - Verification: You run
npm run generateto confirm the script accepts the outlined SVG.
Sources: README.md:34-40, scripts/generate-assets.ts:107-108
Typography Color Palette
The color of the typography changes based on the background variant to ensure contrast.
| Element | Background | Hex Color |
|---|---|---|
| Wordmark | Light | #000000 |
| Wordmark | Dark/Black | #FFFFFF |
| Preview Labels | Light/Gray | #171C24 |
| Preview Subtitles | Light/Gray | #596371 |