CODEWITHSUNDEEP
csszurb-foundation
neojp
neojp

Reputation: 467

Foundation 5: Changing font-sizes and font inheritance for content formatting

I've been looking at the code and documentation but I can't seem to be able to figure this out. Most content tags have a hard-coded font size to 1rem, which makes font size inheritance impossible.

This is the default CSS for Foundation: https://github.com/zurb/bower-foundation/blob/master/css/foundation.css#L3481

/* Default paragraph styles */
p {
  font-family: inherit;
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  text-rendering: optimizeLegibility; }

In an ideal scenario, if you set a container to have a font size of 20px, all content should inherit it and keep working from there - this should include paragraphs, lists, quotes, and the headings should use this as a base size.

This doesn't happen on Foundation, please see the following code snippet on JS Bin.

http://jsbin.com/muqij/1

The only way I've managed to make this work is by re-styling the font sizes to em and changing the container's size.

I would like to believe I'm missing something here.

Upvotes: 1

Views: 2063

Answers (2)

neojp
neojp

Reputation: 467

Since Foundation 5 encourages you to reset your styles for everything, I decided to fix this by using a CSS class that resets font-size inheritance.

I wish I didn't have to use this, but it's a good workaround. It resuses the SCSS variables from Foundation and converts all the REMs to EMs. So your fonts should scale accordingly where needed.

This snippet of code has been published as a Gist on GitHub. https://gist.github.com/neojp/7f6f8e97ba7f0cbf3bd8

// Convert units
// Eg.
//   font-size: convert-unit(16rem, em);
//    >> font-size: 16em;
//
//   font-size: convert-unit(16em, rem);
//    >> font-size: 16rem;
//
//   font-size: convert-unit(16em, px);
//    >> font-size: 16rpx;

@function convert-unit($val, $unit) {
    @return strip-units($val) + $unit;
}


// Bring back font-size inheritance for Foundation 5
// Add this class to the content container and change the font-size accordingly
// Eg.
//   HTML markup
//     <article class="MainContent u-textFormat">
//   Font size with REM assuming html has a default font size of 16px
//     .MainContent { font-size: 1.25rem; }
//   or font size with pixels
//     .MainContent { font-size: 20px; }
// Then all <p> tags would have a font-size of 20px;

.u-textFormat {
    font-size: 1rem;

    h1 {
        font-size: convert-unit($h1-font-size, em);
    }

    h2 {
        font-size: convert-unit($h2-font-size, em);
    }

    h3 {
        font-size: convert-unit($h3-font-size, em);
    }

    h4 {
        font-size: convert-unit($h4-font-size, em);
    }

    h5 {
        font-size: convert-unit($h5-font-size, em);
    }

    h6 {
        font-size: convert-unit($h6-font-size, em);
    }

    p {
        font-size: convert-unit($paragraph-font-size, em);
    }

    ul,
    ol,
    dl {
        font-size: convert-unit($list-font-size, em);
    }

    blockquote cite {
        font-size: convert-unit($blockquote-cite-font-size, em);
    }

    table caption {
        font-size: convert-unit($table-caption-font-size, em);
    }

    table thead tr th,
    table thead tr td {
        font-size: convert-unit($table-head-font-size, em);
    }

    table tfoot tr th,
    table tfoot tr td {
        font-size: convert-unit($table-foot-font-size, em);
    }

    table tr th,
    table tr td {
        font-size: convert-unit($table-row-font-size, em);
    }
}

Upvotes: 0

JAre
JAre

Reputation: 4756

Normally, you don't want inheritance of the font size because it leads to inconsistency and makes design noisy. Also it can entangle yours styles and markup in one big inflexible mess. Imagine alert box that looks different each time.

But if you really need such behavior you can edit settings with Sass version.

Upvotes: 1

Related Questions