Typography & Labeling

This feature allows developers to customize the fonts, styles, and sizes for the gauge’s primary numeric value and its accompanying scale labels.

Overview

The Typography & Labeling feature exposes public properties in the SiticoneGaugeClock control to adjust the font families, font styles, and sizes for both the gauge’s displayed value and the scale labels. With these settings, developers can ensure that the textual elements of the gauge integrate seamlessly with the overall design of the application.

---

Feature Settings and Customization

The table below outlines the available properties for Typography & Labeling, describing their function, default value (if applicable), and a sample usage snippet.

Property	Description	Default Value	Usage Example
ValueFontFamily	Specifies the font family for the main gauge value display.	"Segoe UI"	gauge.ValueFontFamily = "Calibri";
ValueFontStyle	Defines the font style (e.g., Bold, Regular) for the main value display.	FontStyle.Bold	gauge.ValueFontStyle = FontStyle.Italic;
ScaleLabelsFontFamily	Sets the font family for the scale labels (tick markers and numerical labels).	"Segoe UI"	gauge.ScaleLabelsFontFamily = "Arial";
ScaleLabelsFontStyle	Determines the font style for the scale labels.	FontStyle.Regular	gauge.ScaleLabelsFontStyle = FontStyle.Bold;
ScaleLabelsFontSize	Controls the size of the font used for scale labels.	9f (pixels)	gauge.ScaleLabelsFontSize = 10f;

---

Key Points

The table below summarizes the critical aspects of the Typography & Labeling feature.

Aspect	Details
Readability	Ensures that both the main gauge value and scale labels are easily readable across different display resolutions.
Consistency	Offers a uniform look by letting developers choose matching or complementary fonts for both numeric and label displays.
Flexibility	Enables fine-tuning of both font family and style, allowing customization to fit various design languages.

---

Best Practices

Follow these guidelines to optimize the display of textual elements on the gauge.

Practice	Explanation	Code Example
Use a Consistent Font Family	Select a font that matches the overall application design for both the main value and the scale labels.	gauge.ValueFontFamily = "Segoe UI"; gauge.ScaleLabelsFontFamily = "Segoe UI";
Adjust Font Size for Readability	Choose a font size that remains legible even on smaller gauges; avoid sizes that are too small or excessively large.	gauge.ScaleLabelsFontSize = 10f;
Emphasize Critical Information	Use bold or italic styles for the main value display to draw attention, while keeping scale labels in a more neutral style.	gauge.ValueFontStyle = FontStyle.Bold;
Test on Multiple Resolutions	Verify that chosen fonts and sizes render well on different screen resolutions and DPI settings.	(Ensure testing on various devices/emulators.)

---

Common Pitfalls

Avoid the following pitfalls when configuring Typography & Labeling.

Pitfall	Description	Recommendation
Inconsistent Font Usage	Using mismatched fonts for the main value and scale labels can create a disjointed user interface.	Choose complementary or the same font families for a harmonious look.
Overly Large or Small Font Sizes	Fonts that are too large may overwhelm the gauge; fonts that are too small may reduce readability.	Test and adjust ScaleLabelsFontSize within a reasonable range (1f to 72f).
Misusing Font Styles	Overusing bold or italic styles can reduce clarity; use emphasis only where necessary.	Reserve bold styling for the primary gauge value and use regular style for labels.

---

Usage Scenarios

The table below outlines typical scenarios where Typography & Labeling customization is beneficial.

Scenario	Description	Sample Code
Data Dashboards	Ensure that the gauge’s numeric value is prominently displayed while scale labels remain unobtrusive.	gauge.ValueFontFamily = "Calibri"; gauge.ValueFontStyle = FontStyle.Bold;
Enterprise Applications	Use corporate fonts for scale labels and main values to maintain brand consistency across UI components.	gauge.ScaleLabelsFontFamily = "Arial"; gauge.ScaleLabelsFontSize = 11f;
Mobile or High-DPI Environments	Adjust font sizes for readability on smaller screens or high-resolution displays.	gauge.ScaleLabelsFontSize = 12f;

---

Real Life Usage Scenarios

The following table presents real-world examples demonstrating how Typography & Labeling can be configured.

Real Life Scenario	Description	Code Example
Financial Trading Application	A gauge showing real-time stock prices where the main value uses a bold font and the scale labels use a clean, regular font.	gauge.ValueFontFamily = "Segoe UI"; gauge.ValueFontStyle = FontStyle.Bold;
Health Monitoring Systems	A gauge displaying vital statistics, using large and clear fonts for both the main display and the scale for immediate readability.	gauge.ScaleLabelsFontSize = 14f;
Industrial Control Panels	Use robust, legible fonts to ensure that gauge labels remain clear in harsh lighting conditions or from a distance.	gauge.ScaleLabelsFontFamily = "Tahoma"; gauge.ScaleLabelsFontStyle = FontStyle.Regular;

---

Troubleshooting Tips

If you encounter issues with text rendering or font appearance, consider the following troubleshooting tips.

Issue	Potential Cause	Suggested Resolution
Text Appears Blurry or Misaligned	Improper DPI scaling or incorrect font size values might cause rendering issues.	Verify the chosen font sizes and consider using high-quality rendering hints.
Inconsistent Appearance Across Devices	Fonts may render differently on various devices or screen resolutions.	Test on multiple resolutions and adjust the ScaleLabelsFontSize as needed.
Overlapping Text	Excessively large font sizes can cause scale labels to overlap or extend beyond gauge boundaries.	Adjust the ScaleLabelsFontSize and font style to better fit the gauge dimensions.

---

Integration Example

Below is a complete code sample showing how to integrate and customize the Typography & Labeling settings in a WinForms application:

using System;
using System.Drawing;
using System.Windows.Forms;
using SiticoneNetFrameworkUI; // Ensure the namespace matches your project setup

namespace GaugeDemoApp
{
    public class MainForm : Form
    {
        private SiticoneGaugeClock gauge;

        public MainForm()
        {
            InitializeComponent();
            ConfigureGaugeTypography();
        }

        private void InitializeComponent()
        {
            this.gauge = new SiticoneGaugeClock();
            this.SuspendLayout();
            // 
            // gauge
            // 
            this.gauge.Location = new Point(30, 30);
            this.gauge.Size = new Size(300, 300);
            // Typography & Labeling customizations
            this.gauge.ValueFontFamily = "Calibri";
            this.gauge.ValueFontStyle = FontStyle.Bold;
            this.gauge.ScaleLabelsFontFamily = "Arial";
            this.gauge.ScaleLabelsFontStyle = FontStyle.Regular;
            this.gauge.ScaleLabelsFontSize = 10f;
            // 
            // MainForm
            // 
            this.ClientSize = new Size(360, 360);
            this.Controls.Add(this.gauge);
            this.Text = "Gauge Demo - Typography & Labeling";
            this.ResumeLayout(false);
        }

        [STAThread]
        static void Main()
        {
            Application.EnableVisualStyles();
            Application.Run(new MainForm());
        }
    }
}

In this sample, the gauge is configured to use a bold Calibri font for the main value and a regular Arial font for the scale labels, with a font size set to enhance readability.

---

Review

The Typography & Labeling feature gives developers extensive control over the textual elements of the gauge. By setting font families, styles, and sizes via public properties, developers can ensure that both the main value and the scale labels integrate well with the overall application design while maintaining high readability.

---

Summary

The Typography & Labeling feature provides a flexible approach to customizing the gauge’s fonts and labels. Through properties such as ValueFontFamily, ValueFontStyle, ScaleLabelsFontFamily, ScaleLabelsFontStyle, and ScaleLabelsFontSize, developers can tailor the display of numeric values and labels to match the look and feel of their applications. Comprehensive tables, usage scenarios, and a complete code integration example have been provided to facilitate easy customization and ensure a high-quality user interface.

---

Additional sections such as Best Practices, Common Pitfalls, and Troubleshooting Tips offer further guidance for achieving optimal text rendering and ensuring consistency across different devices and UI designs.