Publish with FontLab¶
Start with the thing you need to explain. Choose a paragraph for an idea, a list for a sequence, or a table for facts readers need to compare. Add a card, a tab or a control when the content needs that structure.
This field guide takes you from text to complete pages. Each specimen shows the result first, then the HTML extracted from that compiled result. Where Markdown can express the example, you can copy its source too.
One decision, three treatments¶
All three links below lead to the same FontLab page. Their implementations use MaterialX, Basecoat and prefixed daisyUI, in that order. Use the treatment that fits the surrounding content. You do not need to choose a library for an entire page.
<div class="fltheme-components fl-demo-row">
<p><a class="md-button" href="https://www.fontlab.com/font-editor/fontlab/">Explore FontLab</a>
<a class="btn" data-variant="outline" href="https://www.fontlab.com/font-editor/fontlab/">Explore FontLab</a>
<a class="du-btn du-btn-primary" href="https://www.fontlab.com/font-editor/fontlab/">Explore FontLab</a></p>
</div><div class="fltheme-components fl-demo-row" markdown="1">
[Explore FontLab](https://www.fontlab.com/font-editor/fontlab/){ .md-button }
[Explore FontLab](https://www.fontlab.com/font-editor/fontlab/){ .btn data-variant="outline" }
[Explore FontLab](https://www.fontlab.com/font-editor/fontlab/){ .du-btn .du-btn-primary }
</div>The .fltheme-components wrapper supplies the shared Basecoat and daisyUI
styles. MaterialX classes keep their md- names. daisyUI component classes use
du-, including modifiers such as du-btn-primary.
Build the page in reading order¶
- Choose a pattern for the reader's next decision.
- Copy and adapt the compiled HTML or authored Markdown.
- Check the theme and setup before you reuse a component elsewhere.
- Read Type and emphasis for the smallest useful building blocks.
The examples use FontLab and Vexy content so you can judge line length, labels, screenshots and reading order with real material. Product text is attributed beside the specimen. Sample values in forms and data displays describe only the demonstration.
A complete thought before a component¶
The paragraph below needs no interactive control. Its title and two sentences give the reader enough context to follow the link.
Keep the family together¶
Font conversion is about preserving intent: names, outlines, spacing, kerning, and family structure should survive the trip.
TransType is FontLab's dedicated tool for converting and organizing font families.
<h3 id="keep-the-family-together">Keep the family together<a class="headerlink" href="#keep-the-family-together" title="Permanent link">¶</a></h3>
<p>Font conversion is about preserving intent: names, outlines, spacing, kerning,
and family structure should survive the trip.</p>
<p><a href="https://www.fontlab.com/font-converter/transtype/">TransType</a> is FontLab's
dedicated tool for converting and organizing font families.</p>### Keep the family together
Font conversion is about preserving intent: names, outlines, spacing, kerning,
and family structure should survive the trip.
[TransType](https://www.fontlab.com/font-converter/transtype/) is FontLab's
dedicated tool for converting and organizing font families.Text from Font Converter, stored in
www.fontlab.com/src_docs/md/font-converter.md. The heading is adapted for this
example. Product pages that contain only a Webflow import placeholder are not
used as a prose source.