Guides and Sample Code


macOS Human Interface Guidelines


Colors and Fonts Windows

macOS provides standard panels for picking colors and fonts. Users are accustomed to the appearance, behavior, and availability of these panels throughout the system.

The system-provided Colors window (shown below) lets users enter color data using any of five different color models.

image: ../Art/colors_window_2x.png

If your app deals with color, you may need a way for the user to enter color information. Be sure to use the Colors window rather than create a custom interface for color selection. For information on how to use this window in your app, see Color Programming Topics.

The standard version of the system-provided Fonts window (shown below) includes several controls for adjusting a font’s characteristics. The minimal version of the Fonts window allows users to choose a font, typeface, and size.

image: ../Art/fonts_window_2x.png

If your app supports typography and text layout using user-selectable fonts, you should use the Fonts window to obtain the user’s font selection rather than create a custom font-picker window.

The standard Fonts window also provides advanced typography controls for fonts that support those options. The user can open a Typography inspector by choosing Typography from the action menu (shown above).

image: ../Art/typography_2x.png