►
From YouTube: UX Showcase: Type scales - What's the pt?
Description
No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).
A
A
So
for
those
of
you
just
want
to
cut
straight
to
the
chase,
let's
have
a
look
at
what's
changing
and
what
we
are
going
to
implement
and
you
might
remember
around
10
months
ago
we
soft
launched
a
type
scale
in
the
UI
kit
and
it's
caused
a
little
bit
confusion
because
it
hasn't
ended
up
in
the
product
yet,
but
this
is
the
before
here
and
after
our
validation.
This
is
what
we're
going
to
be
moving
forward
with
to
implement
in
the
product.
A
As
I
said,
the
scale
isn't
currently
implemented
in
the
product,
but
here's
how
a
settings
page
looks
now.
You
notice
we've
got
a
bunch
of
headings,
and
this
is
the
after.
So
much
more
contrast
between
this
level
two
and
this
level.
Three
again
for
security.
We've
got
four
levels
of
headings
here,
one
two,
three,
four
and
and
with
the
new
scale,
those
differences
are
much
more
pronounced.
It's
coming
soon.
A
What's
going
on
here,
typography
in
gitlab
is
very
important.
Here
is
part
of
the
product
with
all
of
the
text
removed
and
another
part,
and,
as
you
can
see,
once
we
take
text
away,
there
isn't
actually
a
lot
left
type
is
everywhere.
Recently,
Sasha
and
Jeremy
wrote
a
blog
post
and
they
argued
that
perhaps
it's
the
most
crucial
part
of
UI.
A
If
we
look
at
how
pajamas
is
structured,
typography
links
to
pretty
much
everything,
not
only
that,
it
also
accounts
for
a
lot
of
the
visual
hierarchy.
It
controls
the
delivery
of
information
from
the
system
to
our
end
users,
and
it
lets
end
users
know
where
to
focus
their
attention.
There's
a
couple
of
different
things
that
we
can
use
in
gitlab
for
visual
hierarchy.
Color
and
contrast
can
have
set
things
size
we
use
and
proximity
in
grouping.
A
So,
like
I
said,
typography
is
not
a
new
thing.
We
know
it's
important
at
gitlab,
while
researching
for
this
work
found
issues,
seven
years
old,
where
we're
talking
about
contrast
between
head
in
sizes,
introducing
scales,
implementing
improvements
to
it
and
ultimately,
building
some
new
skills
when
we
introduce
the
new
typefaces
recently-
and
this
is
where
we
find
ourselves
today-
what
I
was
tasked
with
performing
some
validation
around
these
type
skills,
and
so
we
could
have
some
confidence
before
we
implement
it
in
the
products.
A
So
some
of
you
might
be
thinking
what
is
the
type
scale?
Well,
a
classic
type
of
graphic
scale
is
a
collection
of
font
sizes
that
are
in
visual
Harmony,
the
typographer
or
the
product
designer
chooses
the
sizes.
In
the
same
way,
a
musician
might
choose
a
note
from
a
scale.
This
is
comes
from
when
glyphs
were
made
out
of
hard
substances
like
metal
or
Woods.
Multiple
glyphs
needed
to
assemble
a
page,
so
it
came
built
into
Furniture,
but
this
object
is
fixed
and
hard.
A
It
can't
be
resized
and
to
help
overcome
storage
and
transport
costs.
A
limited
number
of
sizes
is
produced,
it's
followed
through
to
desktop
publishing,
and
we
see
it
in
Google's,
slides
and
figma
and
all
the
way
from
the
beginning
of
Photoshop
version
one,
but
one
of
our
goals.
Now
we
no
longer
have
need
for
limited
sizes
for
storage.
We
don't
need
whole
rooms
to
store
our
typefaces.
They
live
in
our
computers
and
we
no
longer
have
control
of
the
medium
early
type.
A
A
Someone
I
found
interesting
is
a
lot
of
these
are
based
on
musical
scales,
which
I
think
is
quite
interesting.
This
again
goes
back
to.
Even
five
years
ago
we
were
basing
stuff
on
musical
scales,
minor
thirds
major
Foods.
These
relationships
between
notes
in
music.
We
were
using
to
dictate
relationships
between
typeface
sizes.
I
thought
it'd
be
quite
interesting
to
listen
to
some
of
them
just
to
see
if
you
think
that
what
works
in
the
visual
and
works
in
sound
matches
up.
So
here
is
a
major
second
watch,
your
speakers.
B
A
Quite
mysterious,
quite
like
that
one
and
I
also
was
interested
what
about
if
we
take
ratios
from
the
visual
world,
so
the
golden
ratio,
the
ultimate
ratio,
you've,
probably
seen
it
slapped
over
every
logo,
redesign
and
wave
the
Magic
Hands.
Here's
how
that
sounds,
and
you
can
decide
if
we
can
apply
musical
rules
and
visual
rules.
A
Lovely
stuff
see
us
some
shaking
heads
there
in
the
chat,
so
the
process.
How
did
we
actually
go
about
validating
some
of
this
stuff?
So,
like
I
said,
the
first
step
is
working
out.
What
does
validation
mean?
How
can
we
increase
our
confidence
before
we
put
it
in
the
UI?
We
originally
looked
at
a
few
options,
but
I'm
going
to
focus
on
some
visual
validation
exercises
that
we
did
so.
The
first
step
is
finding
out
what
pages
are
important
in
the
app
that
involves
asking
the
whole
company
hey.
A
What
pages
are
important
to
your
users
and
we
got
a
lot
a
lot.
A
lot,
a
lot,
a
lot
of
responses
back
about
40
pages
in
total,
which
we
evaluated
for
suitability.
We
had
limited
time,
so
we
wanted
to
balance
a
test
in
a
range
of
styles,
but
also
make
sure
it
testing
relationships
between
headings.
So
we
need
to
make
sure
there
were
multiple
headings
on
the
page.
Most
of
the
pages
that
we
didn't
review
were
because
they
only
had
one
heading
or
less,
which
is
a
different
problem
to
tackle
for
a
different
day.
A
We
weren't
sure
if
we'd
need
to
make
changes
to
the
scale
what
we
were
validating.
So
we
created
some
basic
components
for
headings
where
we
could
change
the
sizes.
If,
when
we
looked
at
it,
we
found
you
needed
to
change
them,
and
we
also
knew
that
we
wanted
to
review
big
screens
and
small
screens.
So
we
took
a
huge
bunch
of
screenshots
which
we
can
see
at
the
bottom,
for
Pages,
at
both
19
20
and
and
390
width.
A
A
And
added
in
our
components
mix,
we
did
this,
so
we
didn't
have
to
recreate
all
of
the
20
Pages
and
our
components
allowed
us
to
make
updates
in
one
place.
You
can
change
it
elsewhere
when
we
review
them.
We
did
Identify
some
gaps
in
the
guidelines
and
some
things
that
we
didn't
didn't
quite
like
about
the
scale
some
stuff
around
spacing
is
missing.
A
There
were
unanswered
questions
about
sticky
headers
tops
of
pages
what
we
were
going
to
do
when
there
was
no
headings
and
the
relationship
between
especially
H1
H2
and
3
visually,
didn't
look
quite
right,
so
we
made
made
a
bunch
of
changes
and
we're
feeling
super
chuffed
with
ourselves.
So
we
presented
it
to
some
of
our
peers
huge.
Thank
you
to
everyone
who
took
the
time
to
review
it,
and
we
came
out
with
some
clear
takeaways.
So
we
presented
hey
here's
the
four
here's
the
after.
A
In
that
format
we
weren't
feeling
so
tough
with
ourselves
after
peer
review,
but
we
did
end
up
getting
some
really
good
feedback
that
we
were
able
to
action.
We've
chosen
to
increase
the
differentiation
between
H1,
two
three
and
four
reduce
it
between
h456
and
something
that
we
also
realized
was
missing.
Was
this
needing
to
abstract
out
the
font?
Scale
move.
C
A
Away
from
headings
paragraphs,
all
of
that
and
have
an
underlying
scale
that
we
could
use
else
where
this
did
break
some
of
the
music
relationships
and
the
number
of
relationships
that
we
tried
to
to
do
before,
rather
than
a
straight
line
as
the
size
is
increased,
you
can
see
this
wonky
line
and
where
this
shift
angle
is
where
we've
had
to
increase.
The
contrast-
and
you
can
see
it
here
with
the
maximum
in
values-
depended
on
the
screen
size,
but
with
the
feedback
and
this
underlying
scale.
A
B
A
There's
a
quick
for
product
designers.
What
does
this
mean
for
you
and
how
can
you
help
I
think
I'll
just
really
encourage
you
to
help
users
navigate
through
the
product,
and
you
can
do
this
by
ensuring
there's
good
visual
hierarchy
for
users
using
headings
as
anchors
to
group
and
content
and
section
up
content,
also
applying
semantic
hierarchy
for
users
who
rely
more
on
just
their
eyes.
A
E
Yeah
that'd
be
great.
First
of
all,
thank
you.
This
is
fascinating,
I
loved
it
so
I
know
there
is
a
discussion
about
possibly
rolling
back
gitlab
Sands
in
favor
of
system
fonts
again,
no
one
panic.
No
decisions
have
been
made.
It
is
a
conversation
that
is
happening,
but
what
I'm
curious
about
is
what
the
impact
of
that
decision,
if
it
were
made,
would
have
on
these
type
changes
that
we've
made
I
do
have
to
go
so
I'm,
hoping
some
will
take.
A
The
I
think
the
biggest
impact
is
we'll
have
less
confidence
in
the
relationships
and
the
visual
hierarchy,
because
the
the
system
fonts
have
different
weight,
attributes
and
we've
tested
assume
in
a
single
font.
Even
though
there
are
differences
in
browser
rendering
and
operating
system,
rendering,
there's
significantly
less
than
the
difference
of
those
combined
with
system
fonts.
C
All
right,
the
next
question
Dan,
so
you
mentioned
that
some
of
the
things
have
been
updated,
figma,
but
not
so
much
in
the
product.
Yet
so
then
we
kind
of
have
that
weird
handoff
struggle
where
we're
like.
Okay
engineering,
make
this
thing,
except
we
don't
have
these
things
necessarily
available
yet
to
other
products.
C
So
then,
that's
why
you
might
find
like
an
I,
don't
know
like
an
H4
where
it
like
doesn't
belong
or
something
so
is
that
possible
to
hold
that
level
of
accountability
like
and
say,
like
a
merge
request
review,
because
you
mentioned
like
yeah:
let's
try
and
get
the
right
things
on
the
product.
I'm
like
okay,
if
I
get
a
merge
request
review,
the
page
titles
are
wrong.
Let's
say
in
settings
like
should
I
be
trying
to
be
like
no
go
fix.
This
I'm,
like
oh,
not
quite
yet,.
C
Okay,
gotcha
I
still
know
like
what
I
would
do
in
the
scenario
where,
like
there's
like
an
H2
and
that's
like
the
appropriate
size
according
to
the
design
but
like
the
H1,
would
make
it
ginormous
and
everybody's
like.
Why
is
this
thing
so
big
on
the
screen,
and
nothing
else
is,
but
maybe
that's
one
of
those
like
well?
Maybe
we
would
just
hold
off
on
updating
that
one
semantically,
until
we
do
have
proper
stylings
ready.