By Dani Beaumont
In both XD 19 and XD 20 there have been some incremental improvements to typography. Support for uppercase, lowercase, title case, strikethrough and now in XD Let me show you what I mean.
I'm here in the application and I'm trying to add this price here and it looks pretty terrible. So $440.99 cents. What I want to do to make it look a little more attractive is change the dollar sign and the cent sign to be superscript.
To do that, I'm going to go ahead and click in until I select the text and then I'm going to press and drag to select just the dollar sign. In the Properties Inspector on the right here towards the bottom you can see all of the toggles that I just mentioned. I can come over to the superscript toggle and enable that to turn it on. I'm going to come into the .99 there and I'll go ahead and apply superscript to that as well.
Now, because these are components, any change that I make here is going to reoccur to any of those component instances on the canvas.
It's looking a little offset to me at the moment. So I'll come in and just drag it towards the centre a little bit more and then click off. So, I think that looks a bit better.
I have one other change that I want to make here and that's that when a ticket is sold out, letting the viewer know that they can sign up for a waiting list for that particular tour.
For that I'm going to go ahead and use subscript or a footnote.
So I'll go ahead and click into the words "sold out" and at the end here I'm just going to add the number 1. I'll select that number 1 in the Properties Inspector instead of superscript, I'll select subscript and I'll hit ESC.
One more thing; I'll come to this little tagline here and make this a footnote by typing the number one and I'll go in and with that selected go ahead and make that superscript so that it's sitting up tall as well.
When I go ahead and click off, I'm all set with my design changes.
When it comes to character styles and being able to reuse any of the changes that I've made, things are a little different in XD as well.
If I come in and select just the word "sold out" that has that mixed state, with it selected I can then click character styles and notice that two styles were added the one towards the bottom indicates the overall type style. The one towards the top is what I would use for subscript.
Now when it comes to subscript or superscript, you're not really going to apply it to a whole block of text. You're going to usually select a subset and apply it there.
As with the other type changes we've made recently, this is going to work not only here on the design canvas, but in the Desktop Preview app in the mobile preview app.
It will also work in Prototypes and in viewing a prototype in Design Specs.
We have not yet been able to capture changes within a block of text as a design specs specification, so that's a work-in-progress for us for now. But as I mentioned, the prototype is going to look the same in the design spec as it does in Prototype mode or here on the design canvas.
So there we have it. I encourage you to give these new type of graphic controls a try in your own day-to-day workflow.
Add trademark symbols as superscripts to display smaller characters positioned above the baseline of the text. Transform text into trademark symbols to make them appear at the correct size and height. You can also add subscript text that displays below the baseline for formulas, mathematical expressions and chemical compounds.
