CODEWITHSUNDEEP
htmlgoogle-sitestext-size
The Eye
The Eye

Reputation: 59

How do I change the text size in relation to the window in HTML?

I am making a webpage in Google Sites, and am running into a seemingly common problem. How do I make the text size smaller when the window becomes smaller? I am very new to HTML, so I need a simple answer with some sample code. I am not sure, but I think Google Sites only allows HTML. Unfortunately, I am unable to attach more than the following code, which I hope is enough:

<font color="#000000" face="georgia, serif" size="4"><span style="line-height:40px">This is code</span></font>

Upvotes: 0

Views: 1497

Answers (3)

user1368695
user1368695

Reputation: 154

Two Tips:

1) Use relative font size use em. em sets relative unit based on the computed value of the font size of the parent element. e.g.

 `font-size: 2em;`

2) For more specific font add addition media queries based on screen size.

I hope this helps

Upvotes: 0

Korgrue
Korgrue

Reputation: 3478

Using the VW CSS property.

Example:

p {font-size: 4vw;}

Only works reliably on HTML5 compatible browsers.

Spec: https://developer.mozilla.org/en-US/docs/Web/CSS/length

1VW = 1/100th of viewport width. Adjust the value before the vw to adjust the amount of autoscale you want on your type.

Edit: As others have noted - you can also use media-queries, but the scaling is not smooth and will jump to each new font size at each break point. This is fine for body copy where you want exact control over font size - however, if you want proportional scaling at all viewport sizes, not just at predefined breakpoints, use VW.

Upvotes: 2

raven
raven

Reputation: 2431

You should be using css media queries:

@media only screen and (min-width: 768px) {
    /* tablets and desktop */
    font-size: 16pt;
}

@media only screen and (max-width: 767px) {
    /* phones */
    font-size: 12pt;
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
    font-size: 18pt;

}

if you don't know how to add a css file you can read in this link:

Adding Css file

Upvotes: 0

Related Questions