HTML・CSS Writing 2022

font-size --Set font size --Introduction to CSS [CSS3 compatible]

To set font size , set "font-size" in the style sheet (CSS).

<div style = "font-size: 20px"> font size 20px </div>

<div style = "font-size: 30px"> Font size 30px </div>

Effect of enlarging the font

I will write about the effect of making fonts larger in web design.

Speaking of course, it is natural, but I get the illusion that I keep looking at the screen.

Large fonts are easy for users to see

The large font part is seen by the user first. Large fonts and photo sets are most often seen.

Make the heading font larger

Increase the font of the heading. The headline is the first part the user sees.

Large fonts on the front, small fonts on the back

In web design, be aware of the depth of the screen. The image is that large fonts come to the front and small fonts go to the back.

This is the same when considering color, area, and font thickness, as well as font size.

16px is recommended as the default font size

It is better to take it for granted that modern websites can be viewed from smartphones, so it is desirable to have a large font size.

The default is 16px.

Also, if you set the font size to 16px or more, you can prevent the enlargement when filling out the form on iphone / safari.

Prevents automatic enlargement when filling out a form on iphone / safari

There are many units to specify the font size such as px, em, rem,%, but what should I do?

The recommended introduction to Perl seminar HTML / CSS is px.

1. Easy to understand

2. For smartphones, after all, you will have to partially respecify the font size as needed.

I think it's easy to set the font size so that it can be read on a smartphone and make it feel a little bigger on the computer screen. On top of that, it's like adjusting the font size partially.