Jump to content

Resolved - Foundation edit h1, h3 font size

Recommended Posts

If you wish to change the just the <h1> (and <h3>?) tags without affecting any other sizes of fonts anywhere else, then in the cubecart.default.css file, add:

h1 { font-size: desired-size rem; }

1.6875 is: 1 and 11/16ths

Bigger? Try 1 and 13/16ths = 1.8125rem.

REM is a new measurement in CSS3. It means Root-EM.

An EM is a measurement equal to the width of the letter 'M' using the currently applied font and its real size, Times Roman, 14pt, for example.

A REM is the same thing, but it uses the font that is set for the document's most root-level tag (<html> or <body>), Tahoma 12pt, for example.

Thus, using REM, no matter what initial font is specified, all the text everywhere will scale up or down equally, and all the containers expressed in REMs will grow or shrink to accommodate the same number of 'M' letters as a width.


Link to comment
Share on other sites

  • 1 month later...

Does anyone know the REM base in pixels for the default skin? I can find the font family " 'Open Sans', sans-serif;" specified for the html element in cubecart.css and I can find all the REM sizes for the H tags in cubecart.default.css here I see that H6 is set at 1 REM but I'd like to know what pixel size that is so I can base my scaling on a starting point rather than guessing roughly what sizes I'm working to.

Edited by onebrowncow
Link to comment
Share on other sites

Thanks bsmither I had all but concluded the value I was looking for was that the base font-size was 100% and therefore scales according to browser and device, which I guess would be the way to deal with the font base in a responsive framework. Instead I've played around with the REM values until I have what I was looking for. Sometimes I forget this is responsive design and not fixed!

Edited by onebrowncow
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...