Skip to content

Type and emphasis

Write the distinction before styling it. A heading names the subject, a lead sets the scope, and emphasis marks the few words a scanning reader must retain. FontLab's page themes supply typefaces and colours; the source preserves the same reading order in every theme.

Heading, lead and body

Use one page title. Give each substantial idea a second-level heading, and put subtopics beneath it. A lead paragraph introduces the mechanism rather than announcing what the page will discuss.

From pixels to vector artwork

Vexy Lines transforms photos and images into expressive, scalable SVG and PDF vector artwork: engraving lines, waves, halftone dots and letters.

You direct the composition with layers, fills and masks. Export vector artwork for scaling, or a raster image for a quick share.

HTML · compiled output
<h2 id="from-pixels-to-vector-artwork">From pixels to vector artwork<a class="headerlink" href="#from-pixels-to-vector-artwork" title="Permanent link">&para;</a></h2>
<p class="fl-lead">Vexy Lines transforms photos and images into expressive, scalable <abbr title="Scalable Vector Graphics">SVG</abbr> and PDF
vector artwork: engraving lines, waves, halftone dots and letters.</p>
<p>You direct the composition with layers, fills and masks. Export vector artwork
for scaling, or a raster image for a quick share.</p>
Markdown · authored source
## From pixels to vector artwork

Vexy Lines transforms photos and images into expressive, scalable SVG and PDF
vector artwork: engraving lines, waves, halftone dots and letters.
{ .fl-lead }

You direct the composition with layers, fills and masks. Export vector artwork
for scaling, or a raster image for a quick share.

Adapted from Vexy Lines, www.vexy.art/src_docs/md/lines/index.md. No price or licensing promise is part of this specimen.

Emphasis and literal text

Use emphasis for the distinction in the sentence. Use code for literal names such as file extensions. Highlight a UI label only when you refer to a control the reader can find.

Keep the family structure intact when you convert a font. Review names, spacing and kerning together. The output file may use .otf or .ttf.

In FontLab 8, choose Window > Workspaces > Kerning to enter the kerning workspace.

HTML · compiled output
<p>Keep the <strong>family structure</strong> intact when you convert a font. Review <em>names,
spacing and kerning</em> together. The output file may use <code>.otf</code> or <code>.ttf</code>.</p>
<p>In FontLab 8, choose <mark>Window &gt; Workspaces &gt; Kerning</mark> to enter the kerning
workspace.</p>
Markdown · authored source
Keep the **family structure** intact when you convert a font. Review *names,
spacing and kerning* together. The output file may use `.otf` or `.ttf`.

In FontLab 8, choose ==Window > Workspaces > Kerning== to enter the kerning
workspace.

The menu path comes from the FontLab 8 tutorial 90 Second Quick Start Kerning. Local source: fldoc/docs/fontlab/8/tutorials/calfonts/3. Fitting and Spacing/3d-1 90 Second Quick Start Kerning/index.md. The first paragraph adapts FontLab's font-converter introduction.

A quotation needs a source

Use a blockquote for another voice. Keep the attribution beside the words so the reader can distinguish source material from your instruction.

Font conversion is about preserving intent: names, outlines, spacing, kerning, and family structure should survive the trip.

FontLab · Font Converter

HTML · compiled output
<blockquote>
<p>Font conversion is about preserving intent: names, outlines, spacing, kerning,
and family structure should survive the trip.</p>
</blockquote>
<p class="fl-source-note"><a href="https://www.fontlab.com/font-converter/">FontLab &middot; Font Converter</a></p>
Markdown · authored source
> Font conversion is about preserving intent: names, outlines, spacing, kerning,
> and family structure should survive the trip.

[FontLab · Font Converter](https://www.fontlab.com/font-converter/)
{ .fl-source-note }

Keep line length under control

Use the article's reading width for sustained prose. Columns work for short, parallel items; a long explanation split into narrow cards takes more effort to follow. Test real words with accents and long product names before choosing a fixed card width.

Formatting · MaterialX

MaterialX renders this pattern from Markdown. The source panel contains the actual authoring syntax, including attribute lists where they apply. Keep the renderer extensions enabled on the destination.

Keep family names intact. Use emphasis for a short distinction. Mark text to inspect, show removed wording and inserted wording when reviewing a draft.

For notation, H2O and x2 keep the index next to its base.

HTML · compiled output
<p>Keep <strong>family names</strong> intact. Use <em>emphasis</em> for a short distinction. Mark <mark>text to inspect</mark>, show <del>removed wording</del> and <ins>inserted wording</ins> when reviewing a draft.</p>
<p>For notation, H<sub>2</sub>O and x<sup>2</sup> keep the index next to its base.</p>
Markdown · authored source
Keep **family names** intact. Use *emphasis* for a short distinction. Mark ==text to inspect==, show ~~removed wording~~ and ^^inserted wording^^ when reviewing a draft.

For notation, H~2~O and x^2^ keep the index next to its base.

Syntax and variants in MaterialX

Formatting: authoring details

Highlighting changes

Critic markup can show editorial changes in review material. Publish the final reading text rather than leaving change notation in ordinary articles.

Highlighting text

Use ==mark==, ^^inserted^^, and ~~deleted~~ sparingly. The sentence must still communicate when emphasis styling is absent.

Sub- and superscripts

Use H2O and x2 for short textual notation. Use the math renderer for expressions whose structure matters.

Adding keyboard keys

Write a shortcut such as Ctrl+Alt+Del only when the keys are part of an instruction. Name platform alternatives in prose.

A lead paragraph

A lead introduces one subject below the title. Keep the paragraph brief; the larger type does not give it heading semantics.

This pattern uses the shared FontLab editorial styles described in Theme and setup.

Font conversion should preserve the intent of the typeface: names, outlines, spacing, kerning and family structure.

HTML · compiled output
<p class="fl-lead">Font conversion should preserve the intent of the typeface: names, outlines, spacing, kerning and family structure.</p>
Markdown · authored source
Font conversion should preserve the intent of the typeface: names, outlines, spacing, kerning and family structure.
{ .fl-lead }