►
From YouTube: Type scale validation update
Description
A walkthrough of the type scale changes that were explored and validated in https://www.figma.com/file/lX4QacpFi1bje1SbritCun/Type-scale-validation?type=design&node-id=0%3A1&t=dihushH3qWglsbwG-1.
A
Hello,
my
name
is
Jeremy
Elder
staff
product
designer
on
the
foundation's
team
at
gitlab
and
I
want
to
do
a
quick
walk
through,
hopefully
quick
of
where,
where
we're
at
with
the
type
scale,
validation
and
exploration
and
I've
been
working
on
this
with
Dan
and
so
just
in
lieu
of
meetings
and
schedule.
I
wanted
to
record
this
async
just
to
give
a
sense
of
how
to
use
the
file.
What
kind
of
validation
has
been
done
and
what
we're
doing
next
so
that
everybody
is
on
the
same
page
with
the
process.
A
So
with
that
I'm
going
to
jump
over
to
figma
in
the
file
so
type
scale,
validation,
I'll,
link
up
the
file
in
the
description,
and
we
can
go
from
there
all
right,
so
typescale
validation.
It's
the
goal
is
to
stress
test
some
type
across
Gate
lab
just
to
increase
confidence
before
rule
out.
Why
are
we
using
figma,
rather
than
just
going
straight
to
code?
A
Good
question
that
is
because
today
type
in
gitlab
does
not
use
a
systemized
approach,
and
so
there's
all
all
different
sorts
of
type
overrides
and
utility
classes
that
are
being
used
and
so
I
think
we
can
safely
say,
there's
not
a
a
type
scale
that
that
is
being
used
consistently.
So
any
changes
that
we
would
do
in
code
would
require
many
overrides
at
a
an
individual
level
to
actually
even
see
what
the
proposed
changes
are.
A
What
we're
going
to
do,
then
in
in
this
round,
is
test
some
things
with
current
and
ideal
state
in
figma.
It's
not
perfect
we're
taking
screenshots.
We
are
cropping
images.
We
are
dropping
in
our
headings.
Testing
out
spacing
Etc,
not
perfect,
but
it
gives
us
a
good
cut
check
from
there
we're
going
to.
A
We
have
a
an
MR
with
some
style
updates
in
gitlab
UI
we're
going
to
update
those
based
on
our
our
conclusions
from
this
effort
and
then
create
an
integration
branch
and
begin
to
test
on
the
product
and
from
there
we
can
address
some
of
the
overrides
and
yeah
just
generally
address
impact.
So
in
the
file
there's
a
cover,
there's
components,
there's
the
validation
in
situ
there's
before
and
after
and
then
a
bit
of
an
archive
there
components
just
walk
through
this
quickly.
Show
you
how
we're
doing
this.
A
Let's
turn
this
on
for
now.
Okay,
all
right!
So
in
the
components
there
are
it's
it's
basically,
these
main
items
right
here
that
I
that
I
want
to
focus
on
so
margin
visibility.
Okay,
what
is
what
is
that
well
we're
using
spacing
and
we're
using
different
spacing
for
margins
for
before
and
after
headings
those
correspond
with
our
spacing
scale,
and
then
there
is
this
space
control,
which
sounds
a
lot
more
NASA
and
cool
than
it
than
it
really
is
it's
it's
it's.
A
It's
basically
just
a
layer
that
we
can
come
in
here
and
globally,
change
the
the
layer
blend
mode
on,
and
it
can
then
show
and
hide
it
through
the
document.
So
we
we're
turning
on
the
the
margins.
We
want
to
do
this
globally,
rather
than
at
an
instance
level,
which
would
be
really
a
nightmare
to
do
so
at
the
global
level.
Come
in
here
and
and
select
this
and
if
you
go
to
Hue,
you
can
see
that
all
the
margins
disappear
they
are
still
present,
but
because
of
the
the
blend
mode.
A
In
most
cases
they
are
not
visible.
So
that's
that's
the
main
component
like
if
you're
in
here
and
you
want
to
test
the
visibility
you
can
just
come
in
here
and
and
change
that
so
like
if
I'm
I'll
just
get
a
little
ahead
of
myself
here.
But
if
I'm
looking
at
this,
this
validation,
not
that
one,
because
that's
a
before
and
after
screenshot,
okay,
you
know
so
a
page
like
this.
A
I'll
leave
that
on
for
now
then
headings
each
heading.
We
we've
set
up
in
a
desktop
if
you
will
or
the
Mac
size
and
then
the
the
fixed
size,
the
fixed
size
has
a
little
bit
of
padding
baked
in
just
so
that
we
can
I,
guess
margin
baked
in
just
so
that
we
can
kind
of
more
quickly
mock
up
mobile
comps
that
that
have
that
left
and
right
margin
on
a
page.
A
A
I
do
have
a
table
here
that
shows
the
the
proposed
settings
that
we're
working
with
across
the
board
and
then
there's
those
heading
components.
We
have
a
few
utility
things
in
here
that
we're
using
just
to
help
with
the
comps
and
then
there's
a
there's,
a
a
section
here
that
just
has
some
tests
that
we
put
together
so
that
we
can
kind
of
address
this
inline
and
on
the
fly
with
some
of
our
changes,
make
sure
that,
as
we
make
adjustments
here,
it
propagates
throughout
the
document
all
right
the
scale
settings.
A
A
A
scale
of
1.15
fixed
and
then
1.175
for
fluid
and
a
little
screenshot
here
shows
how
that
scales.
So
less
so,
in
fact,
the
H5
and
H6
do
not
scale
at
all
between
break
points
and
then
from
the
H4
through
display.
Those
will
scale
proportionally.
So
this
shows
just
kind
of
an
overlay
of
the
range
of
of
change
that
you
would
see
across
those
different
type
scales.
A
A
We
we
started
with
what
was
in
the
component
library
and
tested,
but
based
on
our
findings
have
begun
to
to
essentially
just
update
the
validation
to
what
we
what
we
recommend
moving
forward.
So
the
scale
is
not
the
major
second,
and
because
of
that,
it's
it's
actually
a
little
more
skewed
towards
a
condensed
UI,
which
I
think
is
more
ideal,
as
we
were
working
through
different
scenarios
and
all
of
the
different
validations
we'll
show
in
a
second.
This
is
just
where
we,
where
we've
netted
out
is
what
would
be.
A
A
So
that's
what
you'll
see
in
this
file
I
would
ask
kindly
not
to
change
any
of
the
settings
that
exist
in
here
unless
you
duplicate
the
file
first,
and
that
is
just
so
that
we
can
preserve
what
we've
determined
we'd
like
to
propose
moving
forward.
So
please
do
that.
There's
a
list
here
of
what
has
been
validated
and
then
a
few
sticky
notes
that
cover
what
what
could
be
documented
and
then
other
considerations
that
we're
still
working
through
and
we
we
do
have
some
conclusions
in
there.
A
So
things
to
document
like
common
space
between
header
and
meta
content,
or
can
we
get
a
more
Universal
heading
size
and
components
like
a
modal
Banner
alert
how
to
how
to
headings
and
containers
work
and,
and
then
obviously
document
final
specs.
Some
of
our
considerations,
just
some
examples,
would
be
like
what
what
happens
with
the
top
of
a
page
heading
like
how
does
it
change
if
something
is
above
it
you
know,
where
is
that
margin
coming
in
Shameless
plug
for
page
templates?
This
is
where
page
templates
would
be
beneficial.
A
If
we
said
okay,
every
page
always
has
a
a
24
pixel
margin
at
the
top
of
the
content
area.
Then
we
could
say:
okay,
then
a
heading
within
you
know.
If
it's
the
first
heading
on
a
page,
first
visible
heading,
then
it
has
no
margin
top
and
then
we
can
conditionally
say
well,
if
there's
an
alert
present
and
something
else
above
it
a
broadcast
message,
then
we
can
adjust
from
there.
A
So
those
are
things
that
we
are
thinking
through
and
considering
lots
of
different
considerations
like
that
another
would
be
sticky
headers
what
happens
to
a
header
that
gets
folded
into
a
sticky
header
on
scroll?
What
size
should
that
be?
Should
they
be
consistent
if
it's
an
H1
versus
H2,
whatever
that
might
be?
How
do
we
handle
that
I
won't
go
through
the
rest
of
those,
but
but
take
a
read
through
that
and
use
the
old
figma
comment?
If
you
have
any
questions
all
right
so
in
this,
you
can
see.
A
And
from
that
exploration,
it's
been
a
process
of
okay.
Let's,
let's
try
these
specs,
let's
work
through
it,
see
how
it
propagates
check
out
everything,
go
back,
dial
it
in
and
that's
how
we
started.
We
originally
started
with
more
of
a
visual
concept
and
then
I
went
back
the
other
day
and
went
to
oh
there's,
a
website
that
that
helps
with
ratios
and
whatnot,
and
actually
we
when
plugging
that
in
our
scale,
was
almost
spot
on
with
what
we
had
had
proposed.
A
What
I'm
working
on
at
the
moment
is
putting
together
some
before
and
afters
that
we
can
kind
of
a
selective
Choice
from
from
the
validation
just
to
represent,
like
okay,
here's
before
and
afters
to
put
those
side
by
side
and
what
that
will
look
like
in
practice
is:
okay.
Here's
a
page
that
we
chose.
Here's
a
description,
here's
some
notes
about
it-
we're
kind
of
going
through
a
good,
better
best
process
with
this,
so
that,
let's
say
that
headings
today
and
in
the
file
like
are
semantically
just
incorrect.
A
A
So
you'll
you'll
note
that,
and
some
of
that
is
clear
in
the
notes
and
so
then
you'll
be
able
to
just
click
through
and
and
do
a
little
before
and
afters
now,
obviously,
I've
got
the
margins
turned
on
so
now,
if
I
go
through
and
turn
that
off
it's
a
little
easier,
so
I
can
click
through.
So
here
is
here
is
current
state.
A
A
That's
that's
what
you
will
find
there
I'm
still
working
through
the
before
and
afters,
but
just
wanted
to
mention
that
that's
what's
what's
going
on
another
another
thing
I
might
do
in
here
is
do
just
like
a
squint
test,
and
so
that
might
be
it's
kind
of
an
effective
way
to
just
test
like
visual
weight.
So
if
we
were
to
take
a
before
and
after
and
I'm
doing
this
on
the
fly,
so
let's,
let's
just
see
how
this
works
here.
A
A
You
can
see
that
there's
just
a
little
more
visual
weight
on
the
headings
Etc.
So
that's
another
thing,
I'm
I'm,
considering
dropping
in
here
just
to
test
it
it's
a
little
more
of
a
objective
way,
I
suppose
to
to
review
these
all
right.
So
that's
a
summary
of
where
we're
at
in
the
process.
What
this
file
will
do
and.