Tag Archives: app design

Animations with the Visual Layer

When the layout of your Universal Windows Platform (UWP) app changes, there is often a slight pause as your app rearranges content to fit the new window size or orientation. Composition APIs let you create smooth-as-butter animations between these states so your layout changes won’t jar your users. After all, layout changes are a basic fact of the app life cycle. It doesn’t mean we can’t handle them gracefully.

image1

Layout animations aren’t completely new, of course. UWP has always allowed you to hook up XAML transitions. These animations have tended to be, let’s just say, somewhat limited. By using implicit animations in the Visual Layer, however, you can have access to low-level animations that run at 60 frames a second in a separate process and all the freedom you need to create the layout animations you want.

Implicit versus Explicit animations

So what exactly is an implicit animation? This is best understood by contrasting it with explicit animations. Explicit animations are animations that you start running yourself in code-behind by calling a method like StartAnimation on a Visual.

For instance, here’s an example of a gear animation and the code used to get it started.

image2


_gearMotionScalarAnimation.Duration = TimeSpan.FromSeconds(secondsPerRotation); 
_gearVisuals.First().StartAnimation("RotationAngleInDegrees", _gearMotionScalarAnimation);

Implicit animations, on the other hand, are configured and then triggered by property changes. There’s a fire-and-forget quality to implicit animations. All you have to do is wire them up and they will just keep working for you, getting recreated and then cleaned up every time the trigger fires.

Here’s how you create and configure an implicit animation in four easy steps:

  1. Create an implicit animation collection.
  2. Create the animation or group of animations.
  3. Associate the animation value to a trigger key in the collection.
  4. Add the collection to your Visual’s ImplicitAnimations property.

The following code is used to create the fruit animations in the animated GIF at the top of this post:


// Create an implicit animation collection (just one member in this case) 
var implicitAnimationCollection = _compositor.CreateImplicitAnimationCollection(); 
 
// Create the animation 
var offsetKeyFrameAnimation = _compositor.CreateVector3KeyFrameAnimation(); 
offsetKeyFrameAnimation.Target = "Offset"; 
 
// Final Value signifies the target value to which the visual will animate 
// in this case it will be defined by new offset 
offsetKeyFrameAnimation.InsertExpressionKeyFrame(1.0f, "this.FinalValue"); 
offsetKeyFrameAnimation.Duration = TimeSpan.FromSeconds(3); 
 
// Associate the animation to the trigger 
implicitAnimationCollection["Offset"] = offsetKeyFrameAnimation; 
 
// Finally, add the implicit animation to individual Visuals 
foreach (var child in _root.Children) 
{ 
    child.ImplicitAnimations = implicitAnimationCollection; 
}

There are two things worth noting about this code:

  • First, only one trigger property is being used, Offset, so the ImplicitAnimationCollection has only one member.
  • Second, the animation uses the Offset property as a trigger, but also uses the Offset property for the animation itself. This is actually pretty common since you will usually want to animate the same property that sets off the transition – for instance, if an element’s scale or rotation changes you would want to create a transition animation between the start and end scale sizes or the start and end rotations.

For extra visual flair you could also decide to have a change in a Visual’s Offset trigger more than one animation – for instance, a position animation as well as a bit of spinning and pulsing. Go to the Windows UI Dev Labs GitHub repository for the full source code for this implicit animations sample.

Using implicit animations as layout animations

In order to apply implicit animations to your XAML layout, the only additional step you need to do, beyond what has been covered in the previous section, is to grab the backing Visuals for any UIElements you intend to animate.

image3

The Layout Animations demo from the Windows UI Dev Labs Sample Gallery on GitHub is basically a GridView control with several images in its Items collection.


<GridView x:Name="gridView" ContainerContentChanging="gridView_ContainerContentChanging"> 
    <GridView.Items> 
        <Image Source="1.jpg" Width="235" Height="200" Stretch="UniformToFill"/> 
        <Image Source="2.jpg" Stretch="UniformToFill"/> 
        <Image Source="3.jpg" Stretch="UniformToFill"/> 
        <Image Source="4.jpg" Stretch="UniformToFill"/> 
        . . . 
    </GridView.Items> 
</GridView>

Whenever the XAML page is resized, images inside the GridView are automatically shifted around by the underlying framework, altering the Offset property of each of the Visuals as it is moved from one position to another.
Here’s how you create and configure an implicit animation and add it to XAML elements in five easy steps:

  1. Create an implicit animation collection.
  2. Create the animation.
  3. Associate the animation value to a trigger key in the collection.
  4. In the ContainerContentChanging event handler, use the interop method GetElementVisual to peel of the backing Visual from a UIElement.
  5. Add the collection to your backing Visual’s ImplicitAnimations property.

The first three steps can all be done in the page’s constructor.


_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor; 
 
// Create ImplicitAnimations Collection.  
_elementImplicitAnimation = _compositor.CreateImplicitAnimationCollection(); 
 
// Define trigger and animation that should play when the trigger is triggered.  
_elementImplicitAnimation["Offset"] = createOffsetAnimation();

In the Layout Animations demo, the final two steps are completed in the GridView’s ContainerContentChanging event handler.


private void gridView_ContainerContentChanging(ListViewBase sender, ContainerContentChangingEventArgs args) 
{ 
    var photo = args.ItemContainer; 
 
    var elementVisual = ElementCompositionPreview.GetElementVisual(photo); 
    elementVisual.ImplicitAnimations = _elementImplicitAnimation; 
}

It really is that simple to add fast, fluid and beautiful layout animations to your XAML page with the Visual layer.

Connected animations

For navigation transitions between pages, the Visual Layer provides a different mechanism known as connected animations to help you make your UI sweeter. Connected animations help the user stay oriented when she is performing common tasks such as context switching from a list of items to a details page.

image4

You can download the full source for this connected animations sample on GitHub.

Wrapping up

The visual power being made available to developers through the Composition APIs have basically always been a part of the UI Frameworks. They just haven’t been accessible until now. Think of this as a UI nuclear reactor being handed over to you to play with. With this awesome power, however, also comes the responsibility to create sweet UI and beautiful interactions. Go forth and be amazing.

To learn more about the topics covered in this post, you are encouraged to voraciously consume the following articles and videos:

Try out your animation skills – download Visual Studio and get designing!

The Windows team would love to hear your feedback.  Please keep the feedback coming using our Windows Developer UserVoice site. If you have a direct bug, please use the Windows Feedback tool built directly into Windows 10.

Creating Beautiful Effects for UWP

The Composition APIs allow you to enhance the appeal of your Universal Windows Platform (UWP) app with a wide range of beautiful and interesting visual effects. Because they are applied at a low level, these effects are highly efficient. They run at 60 frames per second, providing smooth visuals whether your app is running on an IoT device, a smartphone, or a high-end gaming PC.

Many visual effects implemented through the Composition APIs, such as blur, use the CompositionEffectBrush class in order to apply effects. Additional examples of Composition effects include 2D affine transforms, arithmetic composites, blends, color source, composite, contrast, exposure, grayscale, gamma transfer, hue rotate, invert, saturate, sepia, temperature and tint.  A few very special effects go beyond the core capabilities of the effect brush and use a slightly different programming model. In this post, we’re going to look at an effect brush-based effect, as well as two instances of visual flare that go beyond the basic brush: drop shadow and scene lighting.

Blur

The blur effect is one of the subtlest and most useful visual effects in your tool chest. While many visual effects are design to draw in the user’s attention, the blur’s purpose in user experience design is to do the opposite – basically saying to the user, “Move along, there’s nothing to see here.” By making portions of your UI a little fuzzier, you can direct the user’s attention toward other areas of the screen that they should pay more attention to instead. Aesthetically, blur has a secondary quality of transforming objects into abstract shapes that simply look beautiful on the screen.

flower blur effect

Until you get used to the programming model, implementing effects can seem a little daunting. For the most part though, all effects follow a few basic recipes. We’ll use the following in order to apply a blur effect:

  1. Prepare needed objects such as the compositor
  2. Describe your effect with Win2D
  3. Compile your effect
  4. Apply your effect to your image

The compositor is a factory object to create the classes you need to play in the Visual Layer. One of the easiest ways to get an instance of the compositor is to grab it from the backing visual for the current UWP page.


_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

To use composition effects, you also need to include the Win2D.uwp NuGet package in your Visual Studio project. To promote consistency across UWP, the Composition effects pipeline was designed to reuse the effect description classes in Win2D rather than create a parallel set of classes.

win2d UWP nuget package

Once the prep work is done, you will need to describe your (Win2D) Gaussian blur effect. The following code is a simplified version of the source for the BlurPlayground reference app found in the Windows UI Dev Labs GitHub repository, should you want to dig deeper later.


var graphicsEffect = new GaussianBlurEffect()
{
    Name = "Blur",
    Source = new CompositionEffectSourceParameter("Backdrop"),
    BlurAmount = (float)BlurAmount.Value,
    BorderMode = EffectBorderMode.Hard,

};

In this code, you are basically creating a hook into the definition with the Backdrop parameter. We’ll come back to this later. Though it isn’t obvious from the code, you are also initializing the BlurAmount property – which determines how blurry the effect is – of the GaussianBlurEffect to the value property of a Slider control with the name BlurAmount. This isn’t really binding, but rather simply setting a starting value.

After you’ve defined your effect, you need to compile it like this:


var blurEffectFactory = _compositor.CreateEffectFactory(graphicsEffect,
    new[] { "Blur.BlurAmount" });

_brush = blurEffectFactory.CreateBrush();


Compiling your blur effect probably seems like an odd notion here. There’s basically a lot of magic being done behind the scenes on your behalf. For one thing, the blur effect is being run out of process on a thread that has nothing to do with your app. Even if your app hangs, the effect you compile is going to keep running on that other thread at 60 frames per second.

This is also why there are a lot of apparently magic strings in your Composition effect code; things are being hooked up at the system level for you. “Blur.BlurAmount” lets the compiler know that you want to keep that property of the “Blur” object accessible in case you need to change its value later. The following sample handler for the Slider control will dynamically reset the blur amount on your compiled effect, allowing your users to change the blur by simply moving the slider back and forth.


private void BlurAmount_ValueChanged(object sender, RangeBaseValueChangedEventArgs e)
{
    // Get slider value
    var blur_amount = (float)e.NewValue;

    // Set new BlurAmount
    _brush.Properties.InsertScalar("Blur.BlurAmount", blur_amount);
}


The last step in implementing the blur is to apply it to an image. In this sample code, the Image control hosts a picture of a red flower and is named “BackgroundImage.”


<Image x:Name="BackgroundImage" 
        Grid.Column="1" 
        SizeChanged="BackgroundImage_SizeChanged"
        Margin="10"/>


To apply the blur to your image control you need to be able to apply your compiled blur to a SpriteVisual, which is a special Composition class that can actually be rendered in your display. To do that, in turn, you have to create a CompositionBackdropBrush instance, which is a class whose main purpose is to let you apply an effect brush to a sprite visual.


var destinationBrush = _compositor.CreateBackdropBrush();
_brush.SetSourceParameter("Backdrop", destinationBrush);

var blurSprite = _compositor.CreateSpriteVisual();
blurSprite.Brush = _brush;

ElementCompositionPreview.SetElementChildVisual(BackgroundImage, blurSprite);

Once everything is hooked up the way you want and the blur has been applied to a new sprite visual, you call the SetElementChildVisual method to insert the sprite visual into the BackgroundImage control’s visual tree. Because it is the last element in the tree, it gets placed, visually, on top of everything else. And voila, you have a blur effect.

flower blur effect

Effect brushes can also be animated over time by using the Composition animation system in concert with the effects pipeline. The animation system supports keyframe and expression animations, of which keyframe is generally better known. In a keyframe animation, you typically set some property values you want to change over time and set the duration for the change: in this case a start value, a middle value and then an ending value. The animation system will take care of tweening your animation – in other words, generating all the values between the ones you have explicitly specified.


ScalarKeyFrameAnimation blurAnimation = _compositor.CreateScalarKeyFrameAnimation();
blurAnimation.InsertKeyFrame(0.0f, 0.0f);
blurAnimation.InsertKeyFrame(0.5f, 100.0f);
blurAnimation.InsertKeyFrame(1.0f, 0.0f);
blurAnimation.Duration = TimeSpan.FromSeconds(4);
blurAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
_brush.StartAnimation("Blur.BlurAmount", blurAnimation);

You’ll notice that when it comes time to apply the animation to a property, you once again need to refer to the magic string “Blur.BlurAmount” in order to access that property since it is running in a different process.

By animating your effects and chaining them together with other effects, you can really start to unlock the massive power behind the Composition effects pipeline to create beautiful transitions like the one below.

sand dune blur animation

Here the blur effect is combined with a scaling animation and an opacity animation in order to effortlessly draw the user’s attention to the most significant information. In addition, effective and restrained use of effects and animations, as in this sample, creates a sense of pleasure and surprise as you use the app.

Drop Shadow

A drop shadow is a common and effective way to draw attention to a screen element by making it appear to pop off of the screen.

drop shadow effect example

The simplest (and probably most helpful) way to show how to implement a drop shadow is to apply one to a SpriteVisual you create yourself, in this case a red square with a blue shadow.

color shadow example

You create the actual drop shadow by calling the CreateDropShadow method on the compositor instance. You set the amount of offset you want, as well as the color of the shadow, then attach it to the main element. Finally, you add the SpriteVisual “myVisual” to the current page so it can be rendered.


_compositor = ElementCompositionPreview.GetElementVisual(this).Compositor;

// create a red sprite visual
var myVisual = _compositor.CreateSpriteVisual();
myVisual.Brush = _compositor.CreateColorBrush(Colors.Red);
myVisual.Size = new System.Numerics.Vector2(100, 100);

// create a blue drop shadow
var shadow = _compositor.CreateDropShadow();
shadow.Offset = new System.Numerics.Vector3(30, 30, 0);
shadow.Color = Colors.Blue;
myVisual.Shadow = shadow;

// render on page
ElementCompositionPreview.SetElementChildVisual(this, myVisual);


A shadow effect can be attached to basic shapes, as well as to images and text.

blur example

The Windows UI Dev Labs sample gallery even has an interop XAML control called CompositionShadow that does most of the work for you.


<common:CompositionShadow OffsetY="5" OffsetX="2"
        Width="200" Height="200"
        HorizontalAlignment="Left"
        VerticalAlignment="Top"
        Margin="10">
    <Image Source="ms-appx:///Assets/Ninjacat-3.png"
            HorizontalAlignment="Left"
            VerticalAlignment="Top"/>
</common:CompositionShadow>


Scene Lighting

One of the coolest effects to come with the Composition APIs is the new scene lighting effect. In the animated gif below, this effect is applied to a collection of images being displayed in a ListView.

scene lighting animation

While there isn’t space to go into the detailed implementation here, a very general recipe for creating this effect looks like this:

  1. Create various lights and place them in coordinate space.
  2. Identify objects to be lit by targeting the lights at the root visual or any other visuals in the visual tree.
  3. Use SceneLightingEffect in the EffectBrush to customize displaying the SpriteVisual.

Wrapping up

As mentioned, the best place to go in order to learn more about these and other effects is the repository for the Windows UI Dev Labs samples. You should also view these two short but excellent videos on the topic:

Get started on your own app with Visual Studio.

Scaling your phone app design to all UWP device families

1_ APP DESIGN

Device Family resolution break points

In porting your phone app to the Universal Windows Platform (UWP), one of the main challenges you’ll face is coming up with reasonable visual designs for the wide variety of devices and form factors supported by UWP. The advantage of taking the time to do this upfront design thinking is that you can have a beautiful app running not only on Windows 10 Mobile but also on desktops, tablets, Surface Hubs and Xbox Ones connected to large screen TVs. Your UWP app can even run as a mixed reality experience in HoloLens if you want it to.

In an earlier post, we looked at technical tips for porting from Silverlight Phone to UWP. In this post, we’re going to look at design considerations when migrating from a phone screen to larger displays. In addition to a quick tour of adaptive design practices, we will also look at the appropriate visual design patterns to use when transforming six common Windows Phone Silverlight app designs into an equivalent UWP design that will work across a variety of Windows 10 devices:

  • App tabs (Pivot)
  • Feed reader app
  • Ebook / Ezine app
  • Master-detail
  • Lifestyle app
  • Utility app

UWP and adaptive design

Sometimes also referred to as responsive design, adaptive design is a set of practices that enables an app’s UI to resize and restructure itself when the display screen changes its size, orientation, or aspect ratio. When a UWP app runs in desktop mode on Windows 10, adaptive design also comes into play when users resize the app window.

2_APP DESIGN

An effective pixel size for different device resolutions and distances

The good news is that some of this occurs automatically. Windows 10 uses an algorithm to scale fonts and other UI elements for each device. Instead of actual pixels, the scaling algorithm takes effective pixels into account in order to make sure that your fonts look good on a Surface Hub at a standard 10-foot distance as well as on a mobile device at a typical 5-inch distance from your face.

UWP also provides tooling for implementing adaptive design, such as adaptive triggers, the RelativePanel, and the SplitView control. In the 10 x 10 blog series, I provided an overview of how to effectively use these tools in your app.

Six visual design patterns for scaling your app

Typical UWP UX guidance recommends starting with a desktop or tablet app and then working back to a phone design only after those visuals and layouts are mostly fleshed out. This doesn’t help so much, however, if you are starting with a pre-existing phone design. For Silverlight phone developers in particular, it seemed more helpful to start with some typical Windows Phone app categories and seeing what it would take to make them adaptable for larger screen real estate.

App tabs (Pivot control)

A large number of Windows Phone Silverlight apps in the Windows Store use the Pivot control for layout. Most of these apps, in turn, seem to use it to render navigation tabs, with each app containing three to four tabs (pivot panels). The built-in e-mail app on Windows Phone 8.1 uses this layout:

3_APP DESIGN

UWP includes an updated Pivot control (as well as an updated Hub control) that will automatically resize to fill larger displays as well as different orientations and aspect ratios. Combined with the automatic scaling to effective pixels discussed earlier, this means that in the majority of cases, porting a tab design to UWP will be a smooth transition initially.

The most important thing to do is to view your app on a physical device or through the emulator and simulator options in Visual Studio 2015. For larger displays, you will probably notice large empty spaces inside the pivot panels.

4_APP DESIGN

RESIZE

One of the ways to deal with this is by resizing UI elements. For instance, if your content includes images, you will want to make the images larger to give users a higher fidelity experience. It is also recommended that you center-align your content so the empty areas can be naturally divided to the right and to the left of the main content.

When porting an app that uses a Pivot control as its central design element, I suggest that you follow these steps for an easy but effective port of your design:

  • Use UWP pivot control.
  • Allow it to resize on its own.
  • Resize UI elements if needed.
  • Center content.

Feed reader app

Feed readers —apps that involve reading lists of updates throughout the day—is another significant app category. This style of app can also have a huge social networking aspect when updating your own status is also an important component of the app. The Silverlight phone UI design for feed readers typically involves a list of updates, navigation filters at the top of the device, and an app bar at the bottom.

5_APP DESIGN

For this style of design, your easiest path is to keep the same design for Windows 10 Mobile phones. On larger devices, however, allow the content to resize to fill the screen as was recommended with the app tabs example above.

6_APP DESIGN

For the AppBar and any additional top navigation buttons, your strategy should be to reposition these elements depending on the display size. For Windows Mobile, leave your AppBar and Nav Pane at the top or bottom of the screen.

7_APP DESIGN

REPOSITION

For tablets and larger devices, however, you can use the new Nav Pane design positioned to the left of the content, as is shown in the example below. In its narrow form, the Nav Pane shows a hamburger button and icons.

8_APP DESIGN

Narrow Nav Pane across Microsoft apps.

If the device size calls for it, the Nav Pane also has a wider mode which displays text descriptions next to the navigation icons.

9_APP DESIGN

Wide Nav Pane from Microsoft Groove app.

For a feed reader type app, we recommend that you:

  • Resize content on larger displays.
  • Reposition app bars and nav menus.
  • Use the standard Nav Pane design pattern.

Ebook / Ezine app

Apps are a great delivery channel for older media such as books, manga and magazines. They are also relatively easy to create once content has been digitized. The Windows Store are full of apps for every imaginable publisher as well as every imaginable format for the written word.

As you plan out your design for larger screens and different aspect ratios, remember that the effective pixel algorithms on Windows 10 may make resizing of fonts unnecessary. Instead, you will likely find that changing the layout of your text for readability will be more important than resizing. On wider screens, text is easier to read if it is grouped into columns in a newspaper layout, or reflowed into pages in a side-by-side layout for eBooks (with page flipping animations totally optional).

10_APP DESIGN

REFLOW

For eBook and Ezine apps, we recommend that you:

  • Resize images as needed.
  • Allow Windows 10 to resize fonts for you.
  • Reflow text so it is easier to read on wider displays.

Master-detail

The list with details is a prevalent UI design in Silverlight phone apps. In this layout, selecting items from a main list would bring up a new page that provided more details and sometimes additional actions related to the selection. The built-in messaging app on Windows Phone 8.1 is a good example of this design.

11_APP DESIGN

This design is familiar and can be reused for Windows 10 Mobile apps. For tablets and above, however, it makes more sense to use a side-by-side master/details visual design pattern. The side-by-side design makes context switching between different pages unnecessary and improves the user experience. It is enabled when there is more generous screen real-estate.

12_APP DESIGN

In order to alternate between these two UI designs, you need to pursue a strategy of replacing your UI for different device families. Limited content will be shared between the two designs. Instead, you effectively will be displaying two different pages.

13_APP DESIGN

REPLACE

A full sample of the master/details pattern can be found on GitHub. The sample code demonstrates a working RSS Reader.

14_APP DESIGN

When starting from a list with details phone design, it is recommended that you:

  • Replace pieces of your UI between mobile and larger displays.
  • Use the standard master/details design for tablets and up.

Lifestyle app

Given the richer control set available in UWP, the lifestyle app—apps containing beautiful photography and video content, also known as “aspirational apps”—is a category where it may be best to simply re-architect your UI from the ground up.

15_APP DESIGN

We recently made sample code for a photo sharing app available. It demonstrates how to use UWP’s unique controls and can be used as a starting point for implementing your own rich media app UI.

16_APP DESIGN

RE-ARCHITECT

For lifestyle apps, it is recommended that you:

  • Take advantage of the richer controls available in UWP.
  • Re-architect your design for maximum impact.

Utility app

A Windows Phone Silverlight utility app typically does one thing and it does it well. It may take pictures, keep time, find your location on a map, display videos or play back your own voice at a higher pitch. A telling characteristic of the utility app is that it is typically a single page app. The design, consequently, tends to be a blend of custom components as well as some common ones such as an App bar.

17_APP DESIGN

You will need to resize your custom UI elements for larger screens. This will involve increasing the size of assets programmatically and possibly even repositioning your assets for aesthetic balance. More importantly, utility apps typically receive a higher level of interaction than other app categories.

Mobile apps tend to be held in the left hand while either the left thumb or the right index finger is used for interactions (this is reversed for lefties, of course). On tablets, however, users often will use both hands for interactions if the tablet is resting on their laps, or both thumbs if they are holding the tablet in their palms. Repositioning interactions so they occur in the center of mobile displays but on the edges of tablet displays will make your app more convenient for both types of users.

In some cases, you may decide that you want different layouts for each device. In this case, you can fork your design depending the display resolution and device orientation, re-architecting it for each experience. Unlike other app categories with more complex navigation, this is generally a good approach for single-page utility apps.

18_APP DESIGN

RESIZE

When starting with a utility app, it is recommended that you:

  • Use resize and reposition as your main strategies for porting your design.
  • Don’t be afraid to re-architect your design for each device. This is easier to do with utilities than with any other styles of app.

Wrapping Up

Bringing a Windows Phone Silverlight app over to the Universal Windows Platform involves many design considerations that didn’t come up when initially building it. This post provides strategies for redesigning the most common Windows Phone app categories. Sometimes a little bit of resizing is all you need to get your phone app to look good on a desktop or larger device. Sometimes, when a common UI is simply not possible, it may require building distinct user experiences for different screen sizes. The following links provide even more information about adaptive UIs, UWP controls and Windows 10 design best practices.

Understanding typography and UX design

Typography is an ancient discipline concerned with how the formation of letters and words affect usability, readability, and beauty. Making the right typography choices can give your app a feel of accuracy, crispness, and polish. Bad typography choices, on the other hand, are distracting and tend to call attention to themselves.

In our previous post, we introduced some basic design techniques. In today’s post, we dive into typography and introduce key terms and principles related to typography that can enrich anyone’s appreciation of this art and provide that final, professional polish to every app. Chief among these are…

  • kerning
  • character width
  • leading
  • serif and sans-serif
  • font selection (and font families)

Kerning

Kerning (or character spacing) refers to the adjustment of space between two specific letters for legibility. It is one of those little things that you only notice when it is done poorly. In most cases, kerning is handled for you automatically. Should you ever need to fiddle with kerning yourself, as when you’re creating a graphic that includes text, keep these principles in mind.

Figure 1. Kerning is too tight when two letters are touching one another, which can make it hard to read the word properly. In this example, the r and n are too close, creating the illusion of an m.

Figure 1. Kerning is too tight when two letters are touching one another, which can make it hard to read the word properly. In this example, the r and n are too close, creating the illusion of an m.

Kerning is also used to improve the visual balance of a word to make it more aesthetically appealing, especially in banners and headlines. For example, in Figure 2a below, notice how adjusting the kerning between “T” and “y” on the top line of text results in a more balanced product than its counterpart on the bottom.

Figure 2A. Kerning can be used to balance the visual balance of words, which is especially important in banners and headlines.

Figure 2a. Kerning can be used to balance the visual balance of words, which is especially important in banners and headlines.

The key thing to remember when you work with kerning is that kerning is about the perceived rather than the literal spacing and balance between two given letters. In Figure 2 above, for example, the distance between “T” and “y” on the bottom line is literally equal to the spacing between “y” and “p”. It is the spacing on the top line, however, that embodies the ideal appearance of spacing and balance–and this is all that matters. Use your eyes rather than a ruler. If you perceive visual balance in the spacing, so will your customers.

Tip: If you’re having trouble evaluating whether the kerning looks good, try flipping the text upside down! Flipping the text over makes the characters unfamiliar, which can make it easier to evaluate the perceived spacing.

Pay particularly close attention to the kerning in words written all in caps, or where a lowercase is placed next to a capital. Likewise, note that you may need to use rather different kerning to achieve balance between letters of varying shapes–two straight letters (such as “l”) placed side-by-side will usually need rather different kerning than two very rounded letters in the same position, such as “g” and “o.”

Figure 2b. Notice how the "A" in Alligator has a tighter spacing than the l's. The rounded letters in ALLERGY creates white space that makes spacing wider than it seems.

Figure 2b. Notice how the “A” in Alligator has a tighter spacing than the l’s.
The rounded letters in ALLERGY creates white space that makes spacing wider than it seems.

Character width

Some fonts, called proportional fonts, have varying character widths. Others, called monospace fonts, have consistent character widths regardless of the character used.

Understanding the role of character width in fonts impacts design in two key ways:

  • font contrast
  • line length

In general, monospace fonts such as Courier New will always stand out from fonts whose character widths vary. The eye will especially gravitate to them if they are used alongside proportional fonts. Keep this in mind when choosing contrasting fonts to use together.

Figure 3. A standard typeface such as Caslon has variable character widths compared to the more uniform nature of a monospace typeface of Courier.

Figure 3. A standard typeface such as Caslon has variable character widths compared to the more uniform nature of a monospace typeface of Courier.

Monospace fonts make it possible to calculate the length of a line of text accurately, which is not possible with proportional fonts. Because of this, monospace fonts are handy if you need to know exactly how long a line of text will be.

Figure 4. An example of how monospace typefaces produce the same length with the same number of characters even if the words are different.

Figure 4. An example of how monospace typefaces produce the same length with the same number of characters even if the words are different.

As with kerning, character width may often be handled for you automatically when you select your font.  Still, you want to be mindful of how your selection of a font may impact the character width of your text and thus impact areas like line length.

Leading

Pronounced with a short “e” sound (LED-ing), leading (or line height) is the spacing between two lines of text. You measure leading from one baseline of text to the next baseline beneath it. A baseline, as you may recall from writing on lined notebooks, is the line your letters sit on. Letters with tails or descenders sit on the baseline but extend their tails beneath it.

6_leading

By increasing the leading, you increase the vertical white space between lines of text, generally improving readability in exchange for screen real estate. As a general rule, leading should be about 25 to 30 percent more than the character height for good readability. Bad leading leads to text that looks crowded and pinched.

7_leadinginaction

Serif and sans-serif

The difference between serif and sans-serif fonts is core to modern typography. Fortunately, it is fairly simple to distinguish between these two types of fonts: serif fonts have “feet” (represented in red in Figure 5) at the end of their strokes, and sans-serif fonts do not.

Figure 5. Unlike serif (bottom), sans-serif (top) lacks adornments at the ends of its character strokes.

Figure 5. Unlike serif (bottom), sans-serif (top) lacks adornments at the ends of its character strokes.

For example, Verdana is a popular contemporary sans-serif font, and Times New Roman is such a common serif font that many people will recognize it at once

Designers often use a combination of sans-serif and serif fonts to help differentiate headlines from the body of text (see Figure 6 below). Sans-serif is typically used for the headline, and serif is typically used for the body.

This is by no means a universally held rule, however. Fashion has, from time to time, reversed this wisdom! For example, you can see in Figure 6 below that MSN News uses serif font for headlines and sans-serif for the body copy.

Figure 6. MSN News reverses the current fashion by using serif for the headlines and sans-serif for the body copy.

Figure 6. MSN News reverses the current fashion by using serif for the headlines and sans-serif for the body copy.

Fonts (and font families)

When selecting font families, try to keep it…

  • limited
  • complementary
  • consistent
  • accessible

In general, limit the number of font families to a minimum (two is plenty, one is often sufficient) and stick to the same ones through the entire app. You could even stick to one font and then use font weights like Light Bold or Italic to provide any needed contrast, or combine members of a single font family like Verdana and Verdana Bold.

If you use too many fonts, the design can seem busy and even interfere with the user’s perception of the visual hierarchy. Take the example of Figure 7 below. This mockup of an app with poor typographic design illustrates how using too many font families can create chaotic results. The menu uses a bold serif font, while its tab counterpart uses a bold sans-serif font. Meanwhile, the serif font used in the story headline also differs from that used in the menu. The sum result is a disconnect between the two UI elements and a cluttered visual hierarchy (the eye gets lost on its journey).

Figure 7. This mockup of an imagined app shows the confusion too many fonts can cause.

Figure 7. This mockup of an imagined app shows the confusion too many fonts can cause.

If you do use more than one font, ensure the font families complement each other based on their character width, serif or sans-serif nature, and overall appearance. This is something of an art. The fonts should not be so different that the reader wonders why the fonts were chosen (ideally, users should not notice the font at all), but they should still be different enough to add visual interest.

Figure 8. The combination of Georgia and Verdana (left) share similar values that creates a harmonious pairing. Compare that to the pairing of Garamond and Impact (right) where the heavy weight of Impact vastly overshadows its serif counterpart.

Figure 8. The combination of Georgia and Verdana (left) share similar values that creates a harmonious pairing. Compare that to the pairing of Garamond and Impact (right) where the heavy weight of Impact vastly overshadows its serif counterpart.

Finally, when searching for the right font, make sure that it is legible on smaller devices. You probably already know that you should avoid Comic Sans. Also try to avoid fonts that use cursive script, such as Brush Script MT: although they are beautiful, they are difficult to read. You want your user to be able to absorb the content of the text as easily as possible. Of course, there are always exceptions to these rules—use these fonts if you have a compelling reason to do so.

As a practical matter, you are usually safe going with Segoe UI as your sans-serif font in UWP apps. This typeface is very similar to Helvetica, probably the most famous sans-serif font of all time, and is used for the same reasons: crispness, legibility, simplicity. Segoe UI pairs well with the serif font Times New Roman, but also works well with Georgia. Once you are comfortable with these, experiment by switching out your fonts and finding what appeals to you the most. Many professional designers end up with four or five favorite fonts that they simply reuse, two at a time, for many of their projects.

 Tip: You can find fonts on various websites. The better fonts are not free and come with additional options and support; for example: fonts.comfonthaus.com. However, you can also find decent free fonts at sites like dafont.com. Whatever type of font you end up using, be sure you have a license to use it on the specific device family for which you need it and pay attention to the fine print. Likewise, note that using a font that does not appear on the list of recommended fonts for Universal Windows Platform (UWP) apps could trigger a download of font data for your users, which may impact performance or incur mobile data usage costs.

Wrapping Up

Typography is a discipline that developers do not necessarily need to master in order to use it appropriately in their designs. Just knowing the terminology surrounding it and better understanding some of the foundational principles outlined here will help equip anyone to apply it appropriately.