Skip to content

Text Style

Font Size

Font size measures the height of text characters, determining how large or small the text appears.

It's worth noting that different fonts may render text with different visual sizes, even when assigned the same numerical font size.

c#
.Column(column =>
{
    column.Spacing(10);

    column.Item()
        .Text("This is small text (16pt)")
        .FontSize(16);

    column.Item()
        .Text("This is medium text (24pt)")
        .FontSize(24);

    column.Item()
        .Text("This is large text (36pt)")
        .FontSize(36);
});

example

Font Family

A font family is a collection of related fonts that share a consistent design style but may vary in weight, style, or width.

Examples of font families include Arial, Times New Roman, and Calibri.

c#
.Column(column =>
{
    column.Spacing(10);

    column.Item().Text("This is text with default font (Lato)");

    column.Item().Text("This is text with Times New Roman font")
        .FontFamily("Times New Roman");

    column.Item().Text("This is text with Courier New font")
        .FontFamily("Courier New");
});

example

Font Fallback

The Font Fallback option is a list of alternative fonts that are used when specific glyphs are unavailable in the primary font. This ensures that text is displayed correctly across different systems and environments.

A common example is the display of non-Latin characters, such as Arabic or Chinese, which may not be supported by all fonts.

c#
container
    .Text("The Arabic word for programming is البرمجة.")
    .FontFamily("Lato", "Noto Sans Arabic");

example

It's also useful for displaying emojis, which are not universally supported by all fonts.

c#
container
    .Text("Popular emojis include 😊, 😂, ❤️, 👍, and 😎.")
    .FontFamily("Lato", "Noto Emoji");

example

Font Color

The font color determines the color applied to text characters, affecting their visual appearance.

It also influences the default color of text decorations, such as underlines.

c#
.Text(text =>
{
    text.Span("Each pixels consists of three sub-pixels: ");
    text.Span("red").FontColor(Colors.Red.Medium);
    text.Span(", ");
    text.Span("green").FontColor(Colors.Green.Medium);
    text.Span(" and ");
    text.Span("blue").FontColor(Colors.Blue.Medium);
    text.Span(".");
});

example

Background Color

Sets a solid background color for the text.

This color fills the area behind the text or other elements, enhancing contrast and providing visual emphasis.

c#
.Text(text =>
{
    text.Span("The term ");
    text.Span("algorithm").BackgroundColor(Colors.Yellow.Lighten3).Bold();
    text.Span("  ");
});

example

Font Weight

Determines the thickness of the text characters, ranging from light to bold, to create visual hierarchy or emphasis.

Please note that not all fonts support every weight. If the specified weight isn't available, the library selects the closest available option.

NameCSS ValueExample Text
Thin100Example
ExtraLight200Example
Light300Example
NormalWeight400Example
Medium500Example
SemiBold600Example
Bold700Example
ExtraBold800Example
Black900Example
ExtraBlack1000Example
c#
.Text(text =>
{
    text.Span("This sentence demonstrates ");
    text.Span("bold").Bold();
    text.Span(", ");
    text.Span("normal").NormalWeight();
    text.Span(", ");
    text.Span("light").Light();
    text.Span(" and ");
    text.Span("thin").Thin();
    text.Span(" font weights.");
});

example

Italic

Renders text with an italic effect, where letters are slightly slanted to the right.

Commonly used for emphasis or to distinguish specific words.

c#
.Text(text =>
{
    text.Span("In this sentence, the word ");
    text.Span("important").Italic();
    text.Span(" is emphasized using italics.");
});

example

Decorations

Applies decorative lines on text. Commonly used to emphasize specific words or phrases.

Positions

It is also possible to customize the decoration position:

  • Underline,
  • Strikethrough,
  • Overline.
c#
.Text(text =>
{
    text.Span("There are a couple of available text decorations: ");
    text.Span("underline").Underline().FontColor(Colors.Red.Medium);
    text.Span(", ");
    text.Span("strikethrough").Strikethrough().FontColor(Colors.Green.Medium);
    text.Span(" and ");
    text.Span("overline").Overline().FontColor(Colors.Blue.Medium);
    text.Span(". ");
});

example

Styles

It is also possible to customize the decoration line style:

  • DecorationSolid,
  • DecorationDouble,
  • DecorationWavy,
  • DecorationDotted,
  • DecorationDashed.
c#
.Text(text =>
{
    text.Span("Moreover, the decoration can be ");
    text.Span("solid").Underline().DecorationSolid().FontColor(Colors.Indigo.Medium);
    text.Span(", ");
    text.Span("double").Underline().DecorationDouble().FontColor(Colors.Blue.Medium);
    text.Span(", ");
    text.Span("wavy").Underline().DecorationWavy().FontColor(Colors.LightBlue.Medium);
    text.Span(", ");
    text.Span("dotted").Underline().DecorationDotted().FontColor(Colors.Cyan.Medium);
    text.Span(" or ");
    text.Span("dashed").Underline().DecorationDashed().FontColor(Colors.Green.Medium);
    text.Span(".");
});

example

Styling

By default, the decoration line color is the same as the text color, and the decoration thickness is determined by the font. However, these properties can be customized.

c#
.Text(text =>
{
    text.Span("This text contains a ");
    
    text.Span("seriuos")
        .Underline()
        .DecorationWavy()
        .DecorationColor(Colors.Red.Medium)
        .DecorationThickness(2);
    
    text.Span(" typo.");
});

example

Subscript

Subscript displays text slightly below the baseline, often in a smaller size. Commonly used for chemical formulas or mathematical notations

c#
.Text(text =>
{
    text.Span("H");
    text.Span("2").Subscript();
    text.Span("O is the chemical formula for water.");
});

example

Superscript

Superscript displays text slightly above the baseline, often in a smaller size. Typically used for exponents, footnotes, or ordinal indicators

c#
.Text(text =>
{
    text.Span("E = mc");
    text.Span("2").Superscript();
    text.Span(" is the equation of mass-energy equivalence.");
});

example

Line Height

Adjusts the vertical spacing between lines of text, affecting readability and overall text layout. The added space is proportional to the text size.

c#
.Column(column =>
{
    column.Spacing(20);

    float[] lineHeights = [0.75f, 1f, 2f];
    var paragraph = Placeholders.Paragraph();
    
    foreach (var lineHeight in lineHeights)
    {
        column
            .Item()
            .Background(Colors.Grey.Lighten3)
            .Padding(5)
            .Text(paragraph)
            .FontSize(16)
            .LineHeight(lineHeight);
    }
});

example

Letter Spacing

Adjusts the horizontal spacing between characters in the text, affecting readability and overall visual style.

The adjustment is proportional to the text size.

c#
.Column(column =>
{
    column.Spacing(20);
    
    var letterSpacing = new[] { -0.08f, 0f, 0.2f };
    var paragraph = Placeholders.Sentence();

    foreach (var spacing in letterSpacing)
    {
        column
            .Item()
            .Background(Colors.Grey.Lighten3)
            .Padding(5)
            .Text(paragraph)
            .FontSize(18)
            .LetterSpacing(spacing);
    }
});

example

Word Spacing

Adjusts the horizontal spacing between words in the text, affecting readability and overall visual style. The adjustment is proportional to the text size.

c#
.Column(column =>
{
    column.Spacing(20);
    
    var wordSpacing = new[] { -0.2f, 0f, 0.4f };
    var paragraph = Placeholders.Sentence();

    foreach (var spacing in wordSpacing)
    {
        column.Item()
            .Background(Colors.Grey.Lighten3)
            .Padding(5)
            .Text(paragraph)
            .FontSize(16)
            .WordSpacing(spacing);
    }
});

example

Font Features

Font features are a set of typographic features that can be applied to text to enhance its appearance. They are used to control various aspects of text rendering.

Font features are always encoded as 4-character long strings. For example, the ligatures feature is encode as liga, while the kernig feature as kern. For a list of available features, refer to the QuestPDF.Helpers.FontFeatures class.

TIP

Please note that fonts usually support only a subset of font features. If you try to enable a feature that is not supported by the font, it will be ignored. Moreover, some fonts have features enabled by default, and you may not see any difference when enabling them.

Example

Let's analyze the StandardLigatures font feature, which replaces specific pairs of letters (such as 'fi' or 'fl') with a single, combined glyph to enhance aesthetics.

c#
.Row(row =>
{
    row.Spacing(25);

    row.RelativeItem()
        .Background(Colors.Grey.Lighten3)
        .Padding(10)
        .Column(column =>
        {
            column.Item().Text("Without ligatures").FontSize(16);
            
            column.Item()
                .Text("fly and fight")
                .FontSize(32)
                .DisableFontFeature(FontFeatures.StandardLigatures);
        });

    row.RelativeItem()
        .Background(Colors.Grey.Lighten3)
        .Padding(10)
        .Column(column =>
        {
            column.Item().Text("With ligatures").FontSize(16);
            
            column.Item().Text("fly and fight")
                .FontSize(32)
                .EnableFontFeature(FontFeatures.StandardLigatures);
        });
});

example

Released under the MIT License