SHUO: Hello, this is Shuo from Google Web Designer
Today I'm going to talk about a feature in the Google Web Designer called text fitting
Text fitting has been used to fit text inside its container
Let's take a look at an example
Here on stage I have a very long text that runs out of its container
If I select the text
the Text fitting section will be shown in
the Text panel
There are two ways to fit the text
The first way is to reduce text
size to fit container
as soon as the check box is checked
the font size of
the text will be automatically reduced
to fit it within the container
Here it shows
the fitted size is 17 pixel
while the Text panel shows that the original font size is 30
There is another field called minimum
size
which can be used to specify the smallest font size that can be reduced to
so here because the smallest font size it can be reduced to is 10 pixel
the text can be fitted to the size of 17
If I change the minimum size to be 20
the fitted size can only go down to 20 pixel
even though it still overflows
If I uncheck the checkbox
the original font
size is recovered
The second way to fit a text is to truncate to fit container
When I enable truncation
the part that overflows will be removed
and the text will be truncated
when I uncheck the checkbox the original text content is recovered
If I enable both size reduction and truncation
we'll first
reduce the font size
and will only truncate the text
if it doesn't fit at the
smallest font size
When text fitting is enabled
we can still edit the text
To edit the text we need to first select the Text tool
As soon as you click
inside the text element to start editing
we'll temporarily disable text fitting
so you can edit full content
When the editing is done you can click anywhere outside the text element
and the text fitting will be automatically re-applied
Text fitting is especially useful in dynamic ads and responsive ads
Let's take a look at example of dynamic ads
Here on stage I have a text element
whose text content is bound to a field in a sample data
When I switch between no feed and the sample data
the content of the text will be dynamically changed
As a result the text content might overflow
But if I have text fitting enabled on
the text block
you can see when I switch between no feed and sample data
the font size of the text will be automatically adjusted
to make sure it fits within the
container
Text fitting is also useful in responsive ads
Here I have a
responsive ad
and a text element that will resize when the viewport resizes
if I don't have text fitting enabled
you can see when the viewport resizes
the text element also resizes
and there's a chance that the text will run out of the container
but if I have text fitting enabled
you can see the font size of the
text is automatically adjusted
when the text element resizes
That's it
Thanks for watching
