Creating and Styling Text in Flutter

Text is a fundamental part of almost every Flutter application. Flutter provides the Text widget for displaying text and the TextStyle class for controlling its appearance. Text can be customized using properties such as font size, color, weight, style, family, spacing, alignment, decoration, shadows, line height, and overflow behavior.

The Text widget displays a string using a single style. If no explicit style is provided, it uses the nearest applicable DefaultTextStyle. A supplied TextStyle normally merges with the surrounding default style when its inherit property is true. :contentReference[oaicite:0]{index=0}

1. What Is the Text Widget?

The Text widget is used to display textual information on the screen.

Basic Syntax

Text(
  'Hello Flutter',
)

Complete Example

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello Flutter'),
        ),
      ),
    );
  }
}

2. Creating Basic Text

Text can be placed inside almost any Flutter layout widget such as Center, Column, Row, Container, Card, and Scaffold.

Column(
  children: [
    Text('Welcome'),
    Text('Learn Flutter'),
    Text('Start Building Apps'),
  ],
)

3. Styling Text with TextStyle

The TextStyle class describes how text should be formatted and painted. It supports properties such as fontSize, fontWeight, fontStyle, color, fontFamily, letterSpacing, wordSpacing, height, decoration, shadows, and more. :contentReference[oaicite:1]{index=1}

Basic Styled Text

Text(
  'Flutter Development',
  style: TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

4. Changing Font Size

The fontSize property controls the size of the characters.

Text(
  'Large Heading',
  style: TextStyle(
    fontSize: 32,
  ),
)

Different Font Sizes

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Small Text',
      style: TextStyle(fontSize: 14),
    ),
    Text(
      'Medium Text',
      style: TextStyle(fontSize: 20),
    ),
    Text(
      'Large Text',
      style: TextStyle(fontSize: 32),
    ),
  ],
)

5. Changing Font Weight

The fontWeight property controls the thickness of text.

Example

Column(
  children: [
    Text(
      'Normal Text',
      style: TextStyle(
        fontWeight: FontWeight.normal,
      ),
    ),
    Text(
      'Medium Text',
      style: TextStyle(
        fontWeight: FontWeight.w500,
      ),
    ),
    Text(
      'Bold Text',
      style: TextStyle(
        fontWeight: FontWeight.bold,
      ),
    ),
  ],
)

6. Changing Text Color

The color property changes the foreground color of the text.

Text(
  'Blue Text',
  style: TextStyle(
    color: Colors.blue,
  ),
)

Example with Multiple Colors

Column(
  children: [
    Text(
      'Success',
      style: TextStyle(
        color: Colors.green,
      ),
    ),
    Text(
      'Warning',
      style: TextStyle(
        color: Colors.orange,
      ),
    ),
    Text(
      'Error',
      style: TextStyle(
        color: Colors.red,
      ),
    ),
  ],
)

7. Making Text Italic

The fontStyle property can be set to FontStyle.italic.

Text(
  'This text is italic',
  style: TextStyle(
    fontStyle: FontStyle.italic,
  ),
)

8. Combining Font Size, Color, Weight, and Style

Text(
  'Flutter Course',
  style: TextStyle(
    fontSize: 26,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
    color: Colors.deepPurple,
  ),
)

Multiple TextStyle properties can be combined to create a specific visual appearance.

9. Text Alignment

The textAlign property controls the horizontal alignment of text.

Common Values

• TextAlign.left
• TextAlign.right
• TextAlign.center
• TextAlign.justify
• TextAlign.start
• TextAlign.end

Center-Aligned Text

Container(
  width: double.infinity,
  child: Text(
    'Welcome to Flutter',
    textAlign: TextAlign.center,
    style: TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
  ),
)

10. Text Decoration

Text decoration can be added using the decoration property.

Underline

Text(
  'Underlined Text',
  style: TextStyle(
    decoration: TextDecoration.underline,
  ),
)

Line Through

Text(
  'Old Price',
  style: TextStyle(
    decoration: TextDecoration.lineThrough,
  ),
)

Overline

Text(
  'Overline Text',
  style: TextStyle(
    decoration: TextDecoration.overline,
  ),
)

11. Styling Text Decoration

Flutter allows you to customize the color and style of text decorations.

Text(
  'Decorated Text',
  style: TextStyle(
    decoration: TextDecoration.underline,
    decorationColor: Colors.red,
    decorationStyle: TextDecorationStyle.dashed,
    decorationThickness: 2,
  ),
)

Decoration Styles

• TextDecorationStyle.solid
• TextDecorationStyle.double
• TextDecorationStyle.dotted
• TextDecorationStyle.dashed
• TextDecorationStyle.wavy

12. Letter Spacing

The letterSpacing property adds or removes space between individual characters.

Text(
  'FLUTTER',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    letterSpacing: 4,
  ),
)

Letter spacing is particularly useful for headings, uppercase labels, navigation items, and branding text.

13. Word Spacing

The wordSpacing property controls the additional space between words.

Text(
  'Learn Flutter Development',
  style: TextStyle(
    fontSize: 20,
    wordSpacing: 8,
  ),
)

14. Line Height

The height property controls line height as a multiple of the font size. It is especially useful for paragraphs and multi-line descriptions. :contentReference[oaicite:2]{index=2}

Text(
  'Flutter is a powerful UI toolkit. '
  'It allows developers to create applications '
  'for multiple platforms from a shared codebase.',
  style: TextStyle(
    fontSize: 17,
    height: 1.6,
  ),
)

15. Changing Font Family

The fontFamily property specifies the preferred font family for the text. Flutter also supports fallback font families when a required glyph is not available in the primary font. :contentReference[oaicite:3]{index=3}

Text(
  'Custom Font Text',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontSize: 24,
  ),
)

16. Using Custom Fonts

Custom fonts can be added to a Flutter application and declared in pubspec.yaml.

Project Structure

my_app/
├── assets/
│   └── fonts/
│       ├── MyFont-Regular.ttf
│       └── MyFont-Bold.ttf
├── lib/
│   └── main.dart
└── pubspec.yaml

pubspec.yaml

flutter:
  fonts:
    - family: MyFont
      fonts:
        - asset: assets/fonts/MyFont-Regular.ttf
        - asset: assets/fonts/MyFont-Bold.ttf
          weight: 700

Using the Font

Text(
  'Welcome to My App',
  style: TextStyle(
    fontFamily: 'MyFont',
    fontSize: 28,
    fontWeight: FontWeight.bold,
  ),
)

17. Font Family Fallback

Fallback fonts are useful when the primary font does not contain a required character or glyph. Flutter allows multiple fallback font families to be specified in order. :contentReference[oaicite:4]{index=4}

Text(
  'Hello नमस्ते',
  style: TextStyle(
    fontFamily: 'MyFont',
    fontFamilyFallback: [
      'Noto Sans',
      'Roboto',
    ],
  ),
)

18. Adding Text Shadow

The shadows property can be used to add visual depth to text.

Text(
  'Flutter',
  style: TextStyle(
    fontSize: 40,
    fontWeight: FontWeight.bold,
    shadows: [
      Shadow(
        offset: Offset(3, 3),
        blurRadius: 5,
        color: Colors.grey,
      ),
    ],
  ),
)

19. Multiple Text Shadows

Text(
  'Stylish Text',
  style: TextStyle(
    fontSize: 36,
    fontWeight: FontWeight.bold,
    shadows: [
      Shadow(
        offset: Offset(2, 2),
        blurRadius: 4,
        color: Colors.black45,
      ),
      Shadow(
        offset: Offset(-1, -1),
        blurRadius: 2,
        color: Colors.white,
      ),
    ],
  ),
)

20. Text Background Color

The backgroundColor property can be used to paint a background behind the text.

Text(
  'Highlighted Text',
  style: TextStyle(
    fontSize: 20,
    color: Colors.black,
    backgroundColor: Colors.yellow,
  ),
)

21. Styling Text Inside a Container

Text can be combined with a Container to create badges, labels, cards, banners, and other UI components.

Container(
  padding: EdgeInsets.symmetric(
    horizontal: 16,
    vertical: 10,
  ),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text(
    'Flutter',
    style: TextStyle(
      color: Colors.white,
      fontSize: 18,
      fontWeight: FontWeight.bold,
    ),
  ),
)

22. Styling Text Inside a Card

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          'Flutter Training',
          style: TextStyle(
            fontSize: 22,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 8),
        Text(
          'Learn Flutter development from basic to advanced concepts.',
          style: TextStyle(
            fontSize: 16,
            color: Colors.grey,
            height: 1.5,
          ),
        ),
      ],
    ),
  ),
)

23. Styling Text with Theme

For larger applications, typography should be managed consistently. Flutter's theme system allows text styles to be shared throughout the application.

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      headlineLarge: TextStyle(
        fontSize: 32,
        fontWeight: FontWeight.bold,
      ),
      titleLarge: TextStyle(
        fontSize: 22,
        fontWeight: FontWeight.w600,
      ),
      bodyLarge: TextStyle(
        fontSize: 18,
      ),
      bodyMedium: TextStyle(
        fontSize: 16,
      ),
    ),
  ),
  home: HomeScreen(),
)

24. Using TextTheme

TextTheme provides reusable typography roles. Instead of manually specifying the same style repeatedly, widgets can use the application's theme.

Text(
  'Dashboard',
  style: Theme.of(context).textTheme.headlineMedium,
)

Example

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Welcome Back',
      style: Theme.of(context).textTheme.headlineMedium,
    ),
    Text(
      'Here is your dashboard.',
      style: Theme.of(context).textTheme.bodyLarge,
    ),
  ],
)

25. DefaultTextStyle

DefaultTextStyle provides a default text style for descendant Text widgets that do not explicitly define their own style. :contentReference[oaicite:5]{index=5}

DefaultTextStyle(
  style: TextStyle(
    fontSize: 18,
    color: Colors.blue,
  ),
  child: Column(
    children: [
      Text('First Text'),
      Text('Second Text'),
      Text('Third Text'),
    ],
  ),
)

26. Text Style Inheritance

By default, a TextStyle can inherit unspecified properties from the surrounding DefaultTextStyle. This makes it possible to override only the properties that need to change. :contentReference[oaicite:6]{index=6}

DefaultTextStyle(
  style: TextStyle(
    fontSize: 18,
    color: Colors.blue,
  ),
  child: Text(
    'Bold Blue Text',
    style: TextStyle(
      fontWeight: FontWeight.bold,
    ),
  ),
)

In this example, the child text keeps the inherited font size and color while changing the font weight.

27. Text Overflow

Long text may not fit into the available space. The overflow property controls how visual overflow should be handled. :contentReference[oaicite:7]{index=7}

Ellipsis Example

Text(
  'This is a very long text that may not fit on one line.',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
)

The text may appear similar to:

This is a very long text that may...

Other Overflow Options

• TextOverflow.clip
• TextOverflow.fade
• TextOverflow.ellipsis
• TextOverflow.visible

28. Limiting Text to Multiple Lines

The maxLines property limits the number of lines that a text widget can occupy.

Text(
  'Flutter is a UI toolkit that allows developers to build '
  'beautiful applications for multiple platforms.',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
)

29. Soft Text Wrapping

The softWrap property controls whether text can break at soft line breaks.

Text(
  'Flutter makes application development easier.',
  softWrap: true,
)

For normal paragraphs and descriptions, allowing text to wrap is generally appropriate.

30. Text in a Row

Long text inside a Row can cause layout overflow. Expanded or Flexible can be used to give the text a constrained amount of space.

Row(
  children: [
    Icon(Icons.info),
    SizedBox(width: 10),
    Expanded(
      child: Text(
        'This is a long piece of text that needs to fit within the available width.',
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
      ),
    ),
  ],
)

31. Text in a Column

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Profile',
      style: TextStyle(
        fontSize: 26,
        fontWeight: FontWeight.bold,
      ),
    ),
    SizedBox(height: 8),
    Text(
      'John Doe',
      style: TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.w600,
      ),
    ),
    SizedBox(height: 4),
    Text(
      'Flutter Developer',
      style: TextStyle(
        fontSize: 15,
        color: Colors.grey,
      ),
    ),
  ],
)

32. Creating a Text Badge

Container(
  padding: EdgeInsets.symmetric(
    horizontal: 12,
    vertical: 6,
  ),
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.circular(20),
  ),
  child: Text(
    'Active',
    style: TextStyle(
      color: Colors.white,
      fontSize: 14,
      fontWeight: FontWeight.bold,
    ),
  ),
)

33. Creating a Price Label

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Original Price',
      style: TextStyle(
        fontSize: 14,
        color: Colors.grey,
        decoration: TextDecoration.lineThrough,
      ),
    ),
    SizedBox(height: 4),
    Text(
      '₹999',
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
        color: Colors.green,
      ),
    ),
  ],
)

34. Creating a Heading and Description

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Learn Flutter',
      style: TextStyle(
        fontSize: 30,
        fontWeight: FontWeight.bold,
        color: Colors.black87,
      ),
    ),
    SizedBox(height: 10),
    Text(
      'Build beautiful cross-platform applications '
      'using Flutter and Dart.',
      style: TextStyle(
        fontSize: 16,
        color: Colors.black54,
        height: 1.5,
      ),
    ),
  ],
)

35. Creating Richly Styled Text

When different parts of a sentence require different styles, RichText and TextSpan are useful.

RichText(
  text: TextSpan(
    text: 'Learn ',
    style: TextStyle(
      fontSize: 20,
      color: Colors.black,
    ),
    children: [
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          color: Colors.blue,
        ),
      ),
      TextSpan(
        text: ' Development',
        style: TextStyle(
          color: Colors.black,
        ),
      ),
    ],
  ),
)

36. Selectable Text

If users need to select and copy text, Flutter provides selectable text widgets.

SelectableText(
  'This text can be selected and copied.',
  style: TextStyle(
    fontSize: 18,
  ),
)

37. Styling Text with Padding

Padding(
  padding: EdgeInsets.all(20),
  child: Text(
    'Flutter Text Example',
    style: TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
  ),
)

38. Styling Text with Alignment

Container(
  width: double.infinity,
  padding: EdgeInsets.all(20),
  child: Text(
    'Centered Text',
    textAlign: TextAlign.center,
    style: TextStyle(
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
  ),
)

39. Creating a Professional Text Section

Container(
  padding: EdgeInsets.all(20),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'Flutter Training',
        style: TextStyle(
          fontSize: 28,
          fontWeight: FontWeight.bold,
          color: Colors.blue,
        ),
      ),
      SizedBox(height: 8),
      Text(
        'Learn Flutter application development '
        'with practical examples and projects.',
        style: TextStyle(
          fontSize: 16,
          color: Colors.black87,
          height: 1.6,
        ),
      ),
      SizedBox(height: 15),
      Text(
        'Beginner Friendly',
        style: TextStyle(
          fontSize: 14,
          fontWeight: FontWeight.w600,
          color: Colors.green,
        ),
      ),
    ],
  ),
)

40. Creating Text Styles as Reusable Constants

When the same style is used repeatedly, creating reusable styles can make the code cleaner.

const headingStyle = TextStyle(
  fontSize: 28,
  fontWeight: FontWeight.bold,
  color: Colors.blue,
);

const bodyStyle = TextStyle(
  fontSize: 16,
  color: Colors.black87,
  height: 1.5,
);

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text(
      'Flutter',
      style: headingStyle,
    ),
    Text(
      'Learn Flutter development.',
      style: bodyStyle,
    ),
  ],
)

41. Complete Text Styling Example

import 'package:flutter/material.dart';

void main() {
  runApp(const TextStylingApp());
}

class TextStylingApp extends StatelessWidget {
  const TextStylingApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const TextStylingScreen(),
    );
  }
}

class TextStylingScreen extends StatelessWidget {
  const TextStylingScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Text Styling'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'Flutter Development',
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
            const SizedBox(height: 12),
            const Text(
              'Learn how to create and style beautiful text '
              'interfaces in Flutter.',
              style: TextStyle(
                fontSize: 17,
                color: Colors.black87,
                height: 1.5,
              ),
            ),
            const SizedBox(height: 20),
            const Text(
              'Important',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w600,
                color: Colors.red,
                decoration: TextDecoration.underline,
              ),
            ),
            const SizedBox(height: 20),
            Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.circular(12),
              ),
              child: const Text(
                'Styled Text',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                  letterSpacing: 1.5,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

42. Typography Hierarchy

Professional applications generally use different text sizes and weights to establish a clear visual hierarchy.

These values are examples rather than strict requirements. The actual typography should be selected according to the application's design system and accessibility needs.

43. Responsive Text Styling

Text should be designed so that it remains readable and does not overflow on smaller screens.

Example Using LayoutBuilder

LayoutBuilder(
  builder: (context, constraints) {
    final fontSize = constraints.maxWidth < 600
        ? 24.0
        : 32.0;

    return Text(
      'Responsive Heading',
      style: TextStyle(
        fontSize: fontSize,
        fontWeight: FontWeight.bold,
      ),
    );
  },
)

44. Text Scaling and Accessibility

Flutter supports text scaling so applications can respond to user and platform accessibility settings. Current Flutter APIs use TextScaler; the older textScaleFactor API is deprecated. :contentReference[oaicite:8]{index=8}

Text(
  'Accessible Text',
  textScaler: TextScaler.linear(1.2),
)

In most applications, avoid unnecessarily forcing a fixed text scale because users may depend on larger text for accessibility.

45. Common Mistakes While Styling Text

Mistake 1: Using Extremely Large Text

Text(
  'Welcome',
  style: TextStyle(
    fontSize: 100,
  ),
)

Very large text may not fit on smaller screens.

Mistake 2: Ignoring Overflow

Row(
  children: [
    Icon(Icons.person),
    Text('This is a very long username'),
  ],
)

Use Expanded or Flexible when text needs to share limited horizontal space.

Mistake 3: Repeating Large TextStyle Definitions

If the same style appears throughout the application, use TextTheme or reusable style constants.

Mistake 4: Using Too Many Fonts

Using many unrelated font families can make the interface look inconsistent.

Mistake 5: Poor Contrast

Text should have sufficient contrast against its background so that users can read it comfortably.

46. Best Practices for Creating and Styling Text

• Use the Text widget for normal single-style text.
• Use TextStyle to customize text appearance.
• Use TextTheme for consistent application-wide typography.
• Use meaningful font sizes and weights to create hierarchy.
• Use adequate line height for paragraphs.
• Use TextOverflow.ellipsis when long text must fit within a limited space.
• Use Expanded or Flexible for long text inside rows.
• Use custom fonts only when they support the application's design requirements.
• Provide font fallbacks when multilingual or special-character support is important.
• Respect user accessibility and text-scaling settings.
• Avoid unnecessary text decorations and excessive shadows.
• Keep typography consistent across screens.

47. Text Styling Quick Reference

48. Interview Questions

1. What is the purpose of the Text widget in Flutter?
2. What is TextStyle?
3. How do you change the font size of a Text widget?
4. How do you make text bold?
5. How do you make text italic?
6. How do you change text color?
7. What is the purpose of textAlign?
8. What is TextOverflow.ellipsis?
9. How does maxLines work?
10. What is the difference between letterSpacing and wordSpacing?
11. How do you underline text?
12. How do you add a shadow to text?
13. How do you use a custom font in Flutter?
14. What is TextTheme?
15. What is DefaultTextStyle?
16. How can you prevent text overflow inside a Row?
17. What is the purpose of fontFamilyFallback?
18. What is the purpose of the height property in TextStyle?
19. What is the difference between Text and RichText?
20. What is TextScaler used for?

49. Practice Exercises

1. Create a Flutter screen with a large heading and a paragraph.
2. Create three Text widgets with different font sizes.
3. Create normal, medium, semi-bold, and bold text.
4. Create an italic text example.
5. Create text using different colors.
6. Create underlined and line-through text.
7. Create text with custom letter spacing and word spacing.
8. Create a paragraph with a custom line height.
9. Create a badge using a Container and styled Text.
10. Create a product card containing a title, description, and price.
11. Create a login screen with a heading, labels, and button text.
12. Create a long text example using maxLines and TextOverflow.ellipsis.
13. Create a RichText widget with multiple text styles.
14. Create a reusable TextStyle for headings and body text.
15. Create a custom TextTheme and use it throughout an application.
16. Add a custom font and use it in multiple Text widgets.

50. Key Takeaways

• Text is the primary widget for displaying normal text.
• TextStyle controls the visual appearance of text.
• Font size, weight, color, family, style, spacing, decoration, and line height can all be customized.
• TextOverflow helps handle text that exceeds its available space.
• maxLines limits the number of lines displayed.
• Expanded and Flexible are useful for handling long text inside rows.
• TextTheme helps maintain consistent typography throughout an application.
• DefaultTextStyle can provide a common style for descendant Text widgets.
• Custom fonts can be declared in pubspec.yaml and applied using fontFamily.
• Font fallbacks are useful when supporting different scripts and special characters.
• Good typography improves readability, consistency, accessibility, and user experience.

51. Learning Resources

• JustAcademy Flutter Training Course
• Register for Flutter Course Demo
• Official Flutter Text Documentation
• Official Flutter TextStyle Documentation
• Official Flutter DefaultTextStyle Documentation
• Flutter Custom Fonts Guide

Summary: Creating and styling text in Flutter starts with the Text widget and becomes more powerful through TextStyle, TextTheme, and related text widgets. By controlling font size, weight, color, family, spacing, line height, decoration, alignment, and overflow, developers can create clear, readable, responsive, and professional user interfaces.