From 771b02a543a37a550415e08069b346fe621f1d4d Mon Sep 17 00:00:00 2001 From: Hugo Locurcio Date: Thu, 16 Mar 2023 03:42:50 +0100 Subject: [PATCH] Document embolden and font spacing in Using fonts This also mentions what the default project font is for reference. --- tutorials/ui/gui_using_fonts.rst | 69 ++++++++++++++++++ ..._faux_bold_italic_vs_real_bold_italic.webp | Bin 0 -> 3286 bytes 2 files changed, 69 insertions(+) create mode 100644 tutorials/ui/img/using_fonts_faux_bold_italic_vs_real_bold_italic.webp diff --git a/tutorials/ui/gui_using_fonts.rst b/tutorials/ui/gui_using_fonts.rst index 30cd80bf0c8..6efce1e3113 100644 --- a/tutorials/ui/gui_using_fonts.rst +++ b/tutorials/ui/gui_using_fonts.rst @@ -11,6 +11,10 @@ font for and select the font tab. The second is in the inspector for control nodes under **Theme Overrides > Fonts**. Lastly, in the inspector settings for themes under **Default Font**. +If no font override is specified anywhere, +`Open Sans `__ SemiBold +is used as the default project font. + .. note:: Since Godot 4.0, font sizes are no longer defined in the font itself but are @@ -483,6 +487,71 @@ places: Saving FontVariation to an external resource file +Faux bold and italic +^^^^^^^^^^^^^^^^^^^^ + +When writing text in bold or italic, using font variants specifically designed +for this looks better. Spacing between glyphs will be more consistent when using +a bold font, and certain glyphs' shapes may change entirely in italic variants +(compare "a" and *"a"*). + +However, real bold and italic fonts require shipping more font files, which +increases distribution size. A single :ref:`variable font ` +file can also be used, but this file will be larger than a single non-variable font. +While file size is usually not an issue for desktop projects, it can be a concern +for mobile/web projects that strive to keep distribution size as low as possible. + +To allow bold and italic fonts to be displayed without having to ship additional +fonts (or use a variable font that is larger in size), Godot supports *faux* +bold and italic. + +.. figure:: img/using_fonts_faux_bold_italic_vs_real_bold_italic.webp + :align: center + :alt: Faux bold/italic (top), real bold/italic (bottom). Normal font used: Open Sans SemiBold + + Faux bold/italic (top), real bold/italic (bottom). Normal font used: Open Sans SemiBold + +Faux bold and italic is automatically used in :ref:`class_RichTextLabel`'s bold +and italic tags if no custom fonts are provided for bold and/or italic. + +To use faux bold, create a FontVariation resource in a property where a Font +resource is expected. Set **Variation > Embolden** to a positive value to make a +font bolder, or to a negative value to make it less bold. Recommended values are +between ``0.5`` and ``1.2`` depending on the font. + +Faux italic is created by skewing the text, which is done by modifying the +per-character transform. This is also provided in FontVariation using the +**Variation > Transform** property. Setting the ``yx`` component of the +character transform to a positive value will italicize the text. Recommended +values are between ``0.2`` and ``0.4`` depending on the font. + +Adjusting font spacing +^^^^^^^^^^^^^^^^^^^^^^ + +For stylistic purposes or for better readability, you may want to adjust how a +font is presented in Godot. + +Create a FontVariation resource in a property where a Font resource is expected. +There are 4 properties available in the **Variation > Extra Spacing** section, +which accept positive and negative values: + +- **Glyph:** Additional spacing between every glyph. +- **Space:** Additional spacing between words. +- **Top:** Additional spacing above glyphs. This is used for multiline text, + but also to calculate the minimum size of controls such as :ref:`class_Label` + and :ref:`class_Button`. +- **Top:** Additional spacing below glyphs. This is used for multiline text, + but also to calculate the minimum size of controls such as :ref:`class_Label` + and :ref:`class_Button`. + +The **Variation > Transform** property can also be adjusted to stretch +characters horizontally or vertically. This is specifically done by adjusting +the ``xx`` (horizontal scale) and ``yy`` (vertical scale) components. Remember +to adjust glyph spacing to account for any changes, as glyph transform doesn't +affect how much space each glyph takes in the text. Non-uniform scaling of this +kind should be used sparingly, as fonts are generally not designed to be +displayed with stretching. + .. _doc_using_fonts_opentype_font_features: OpenType font features diff --git a/tutorials/ui/img/using_fonts_faux_bold_italic_vs_real_bold_italic.webp b/tutorials/ui/img/using_fonts_faux_bold_italic_vs_real_bold_italic.webp new file mode 100644 index 0000000000000000000000000000000000000000..448503f394fdf1a0d62cc93c659af6b54abe46c7 GIT binary patch literal 3286 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 UoEz{yJlT<>znA!b|M|}x0`Ig>i2wiq literal 0 HcmV?d00001