Variable font size

User 458539 Photo


Registered User
1,583 posts

How can I use a vw setting on a font but put a limit on how big it will expand to? Ex., through the break points I have it set on 1.60 vw but need to set the max width at a certain point.

Thanks

Byron
User 2699991 Photo


Registered User
4,782 posts
Online Now

Byron Tipping wrote:
How can I use a vw setting on a font but put a limit on how big it will expand to? Ex., through the break points I have it set on 1.60 vw but need to set the max width at a certain point.

Thanks

Byron


I'm guessing here as I don't have access to my computer at the moment but cannot one just set the maximum width to whatever you want it to be at that particular breakpoint ( in vw) then change the width to auto.
Sorry it's a bit vague but I can't check it out for an hour or two
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

Or even easier

Set the width to AUTO at all breakpoints
Then set the MAXIMUM width to the VW you require changing THAT as you move through the breakpoints
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 379556 Photo


Registered User
1,533 posts

If I have understood the original post correctly, it is wished to put a limit on the variable font-size one gets by using a vw setting.

One can set minimum and maximum sizes for fonts, and have a variable size between those minimum and maximum sizes. I think, however, that a vw setting is appropriate only for the variable size.*

SD allows easy conversion between, for example, vw and px. In the attached mobile-first project file I did the following to limit the font-size growth.

1. I set breakpoints at 340px and 960px.
2. I wanted the minimum font-size to be 16px, and set that for below the 340px breakpoint.
3. Exactly** at the 340px breakpoint I changed the font setting to vw, and SD automatically converted the 16px to 4.70vw.
4. I wanted the font-size not to continue growing once it got to the 960px breakpoint. Exactly at that breakpoint I therefore changed the font setting to px, and SD automatically converted the 4.70vw to 45px.

Frank

* A vw is, of course, a percentage of the visible width of the web page.
** I do this by clicking on 340px in the Toggle Breakpoints drop-down.
Attachments:

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.