You can size type in a variety of ways. Most of you have been using px increments, which is the easiest way of doing it.
px
font-size: 20px
There are some limitations with pixel values because they are finite values. If a user changes the default font-size of their browser, your page design will stay the same.
You can specify how your type changes when you resize your browser using media queries(which we’ll talk about later).
Viewport Units
CSS also has viewport units which are increments that are dependent on the size of the browser window, or viewport.
The units are:
vw – percentage of the viewport width
vh – percentage of the viewport height
vmin – a percentage of the viewport width or height, whichever is smaller
vmax – a percentage of the viewport width or height, whichever is larger
.item {
font-size: 10vw;
}
The best way to figure this out is to experiment. Here is some more information about using this feature:
👥 Internet First Memories Show and Tell
👀Typography Continued
Tips for setting body copy
Type Sizes
.item { font-size: 10vw;}