Parent Item of Foundation 5 Top Bar Menu Not Available on Mobile

180 Posts

troubadour Reply #11, 10 years, 1 month ago

ok thanks, i do the same for other style.
will try it now with menu.

180 Posts

troubadour Reply #12, 10 years, 1 month ago

I tried to change Heading font size with http://modularscale.com/ but i don't understand it very well.
F5 has font size in rem but this tool gives you em font size, is it the same ?

what size do you input in the 2 fields for example, to have headings smaller than original F5 headers ?

Ideal text size
Important number

thanks !

1,078 Posts

mmcgee Reply #13, 10 years, 1 month ago

You just use the numbers, but change em to rem in the foundation sheet. The important aspect of it is the relationship between the numbers. I don't understand REM either, other than that I liked their first two albums best, and often I don't get enough of it.

1,078 Posts

mmcgee Reply #14, 10 years, 1 month ago

Here's the scale I selected, and I entered the same in both for desktop and then further down the foundation.css for the mobile. I still may go back and adjust mobile. The goal is that there is harmony or a balance amongst the sizes of the fonts. There's a method to the madness I believe in that all paragraphs, headers, subheaders, etc will all have pleasing visible balance throughout the site. Let me review my notes, to see what I selected to arrive at the following options. I was looking for headlines that were not so huge, and also had smaller more subtle changes between them.

h1 {
  font-size: 2.125rem; }

h2 {
  font-size: 1.6875rem; }

h3 {
  font-size: 1.375rem; }

h4 {
  font-size: 1.125rem; }

h5 {
  font-size: 1.125rem; }

h6 {
  font-size: 1rem; }

1,078 Posts

mmcgee Reply #15, 10 years, 1 month ago

I put 16px as ideal font size because that's what foundation bases everything on. The site width of 62.5 em equates to 1000 pixels wide when the browser default font size is set the 16. (see: http://foundation.zurb.com/forum/posts/1407-whats-the-logic-behind-max-width-625-em

I do not believe I put anything in for important number, but I am still reviewing my notes. The various options 15:16, 3:4 etc. generate different scales. Some have more font sizes with smaller increment in between. Others have fewer options with bigger increments in between.

Like if you pick 15:16 to get a ton of options, you would not necessarily have to pick 6 in a row... you could pick every other one, or pick two, skip two pick two — if that makes sense. Think of it like music, in in that scale, all those musical notes (font sizes) go together.

1,078 Posts

mmcgee Reply #16, 10 years, 1 month ago

This quote perfectly sums up the concept: A modular scale, like a musical scale, is a prearranged set of harmonious proportions.—Robert Bringhurst
Here's a link from early on when foundation was beginning to move in this direction with typography:

http://zurb.com/article/1000/foundation-3-0-typography-and-modular-sca

You don't need to worry out changing line-height or margin-bottom. In foundation, those are all in ems, so basically a percentage of the font size.

I also have moved to doing all padding and all margins in ems, and notice how well all elements on the page arrange and family together as the browser window gets smaller or larger.

180 Posts

troubadour Reply #17, 10 years, 1 month ago

wow thank you very much for all these explanations !
i see much clearer in scales now !

REM is also just a band i like, for me wink

i will play with it !

180 Posts

troubadour Reply #18, 10 years, 1 month ago

by the way, Foundation 5.5.2 is out now

with lots of fixes

http://foundation.zurb.com/docs/changelog.html

1,078 Posts

mmcgee Reply #19, 10 years, 1 month ago

Great. Have fun. Sorry to barrage you with details.

Just remember, there are two areas to change h tags. I cannot replicate the numbers I came up with. I know I kept notes but cannot find them at the moment. I may have had a link to another site for generating scales that I worked from.

Certainly, at Modular Scale, click on "Tips for choosing a scale" if you already haven't. It does a much better job of explaining the concept.

180 Posts

troubadour Reply #20, 10 years, 1 month ago

in foundation.css i only change here (about line 3015):

@media only screen and (min-width: 40.063em) {
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.4; }

	h1 {
  font-size: 1.383rem; }

h2 {
  font-size: 1.296rem; }

h3 {
  font-size: 1.215rem; }

h4 {
  font-size: 1.139rem; } }

but did not change here (about line 2839):

/* Default header styles */
h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-style: normal;
  color: #479caf;
  text-rendering: optimizeLegibility;
  margin-top: 0.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  text-transform:uppercase;}
  h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-size: 60%;
    color: #6f6f6f;
    line-height: 0; }

h1 {
  font-size: 2.125rem; }

h2 {
  font-size: 1.6875rem; }

h3 {
  font-size: 1.375rem; }

h4 {
  font-size: 1.125rem; }

h5 {
  font-size: 1.125rem; }

h6 {
  font-size: 1rem; }