Font Size Naming

Hello Experts,

I'm looking to create my own RWD Framework and will have a whole bunch of different font sizes that I want to include in my framework. The font sizes I want to include are listed below. What I need help with is a naming scheme that I can use for each font size below. This way a user can associate the name of the size they want to use for their selector(s).

Font Sizes:
90
72
60
48
36
24
21
18
16
14
12
10
8

My base font size will be 16.
LVL 4
asp_net2Asked:
Who is Participating?
 
Kyle HamiltonData ScientistCommented:
you would not do this, that would would be weird:

.header-intro { font-size: $font-size-h1; }

bootstrap wouldn't do it either. Those names are used like this (from the less file, but you get the idea):
h1, .h1 { font-size: @font-size-h1; }
h2, .h2 { font-size: @font-size-h2; }
h3, .h3 { font-size: @font-size-h3; }
h4, .h4 { font-size: @font-size-h4; }
h5, .h5 { font-size: @font-size-h5; }
h6, .h6 { font-size: @font-size-h6; }

Open in new window


you would do something along the lines of this:

.header-intro{floor(($font-size-base * 2.6)) !default; // ~36px}

so your font sizes are all functions of the base size.

As far as the names, it's a matter of preference. The longer names will be easier to recognize two weeks from now, after you've forgotten what you did, or for someone reading your code. The shorter version, say, $fb:100%, are quicker to type, but more obscure.
0
 
Habib PourfardSoftware DeveloperCommented:
what do you think about:

90 font-size-bigger-xxxx
72 font-size-bigger-xxx
60 font-size-bigger-xx
48 font-size-bigger-x
36 font-size-big-xxxx
24 font-size-big-xxx
21 font-size-big-xx
18 font-size-big-x
16 font-size-base
14 font-size-small-x
12 font-size-small-xx
10 font-size-small-xxx
8   font-size-small-xxxx
0
 
asp_net2Author Commented:
Not bad, please let me know if you come up with any other ideas though.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
90 font-size-90
72 font-size-72
:
10 font-size-10
8   font-size-8
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you are making a responsive library, you should keep it simple.

.font-size-xs
.font-size-sm
.font-size-md
.font-size-lg

Then classes for each media query (Your font for small screen for "medium" may need to be larger.  Or your font size for a 2000px screen may also need to be larger.

@media (max-width: 600px) {
  .font-size-xs {
            font-size:8px;
  }
.font-size-sm{
          font-size:10px;
}
.font-size-md{
          font-size:12px;
}
.font-size-lg{
          font-size:14px;
}
h2.font-size-sm{
          font-size:14px;
}
h2.font-size-md{
          font-size:18px;
}
h2.font-size-lg{
          font-size:24px;
}
}

Open in new window

0
 
asp_net2Author Commented:
Hi Scott,

Ok, do you have any suggestions for the naming that I need? That is what I'm really looking for in this post. I like what Habib came up with but also looking for more suggestions before just choosing the only one provided thus far.
0
 
Marco GasiFreelancerCommented:
I don't like typing too mutch, so in a saving-finger perspective I could think something about this:

90 fs-giant-4
72 fs-giant-2
60 fs-giant-1
48 fs-giant
36 fs-big-4
24 f-big-3
21 fs-big-2
18 fs-big
16 fs-default
14 fs-small
12 fs-small-2
10 fs-small-3
8   fs-small-4
0
 
Kyle HamiltonData ScientistCommented:
f8
f10
f12
...
0
 
Kyle HamiltonData ScientistCommented:
that kind of specificity is not very "frameworky"  - as others have suggested, i would keep it simple.

also, if you use percentages, you can nest html tags, taking advantage of the whole cascading thing...

.sm{font-size:95%}
.xsm{font-size:85%}
.lg{font-size:105%}
.xlg{font-size:115}
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
>do you have any suggestions for the naming that I need?

Yes, I gave it in my answer

.font-size-xs
.font-size-sm
.font-size-md
.font-size-lg

Then set you css classes so no matter what I add the class font-size-xs it will set the appropriate size for p and div tags as well  has h1,h2 etc.  I don't care what the actual size is, as a user I just want the xs or sm or md or lg size and the framework should be able to determine if the font size is 10px or 50px depending on the tag I used or viewport size.  

If I spec a medium font, that font will probably need to be a different physical size for >1200px screen vs a 350px screen.

Look to see  how bootstrap and foundation do this.  My answer is based on bootstrap naming conventions.  I personally will not use another theme unless it was made with bootstrap and if I need a quick small site, I always use that as the base.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
> I like what Habib came up

I agree with Kyle, that answer is  not frameworky.   Make it easy, the framework should do all the work, if I had to think about all those font sizes, I wouldn't need the framework to do this.
0
 
asp_net2Author Commented:
@Scott and Kyle,

I would like to have different sass variables for each of my font-sizes to assign to my selectors below. I know that I have been mentioning in terms of px but I have a mixin that will convert px to rem which is what I plan on using for my font-sizes. Also, my base font-size for my html is 100%.

I'm not sure how I can assign different font-sizes to all of my selectors below if I only have 4 main font-sizes like you have mentioned? Am I missing something? If so, please explain so that I can understand. I'm not saying I know more than either of  you because I don't hence the reason I'm here, I'm just having trouble understanding how I can only have 4 font-sizes to assign to all of my selectors below.

I just want to make sure that I also have some sort of typographic scale as well. That is why I want different sizes for each of my selectors as well.

h1 {
  font-size: ;
}
h2 {
  font-size: ;
}
h3 {
  font-size: ;
}
h4 {
  font-size: ;
}
h5 {
  font-size: ;
}
h6 {
  font-size: ;
}
p.intro-text {
  font-size: I would like this to be 18px;
}
p.aside-text {
  font-size: I would like this to be 14px;
}
p {
  font-size: I would like this to be 16px (which would inherit from body since I have 100% in html);
}
0
 
Kyle HamiltonData ScientistCommented:
have you looked at how other frameworks do it? like bootstrap or foundation?

for bootstrap, look in the less dir for type.less, and variables.less

I'm not familiar with foundation, but I'm sure you can find their treatment of type in the source code.
0
 
asp_net2Author Commented:
Hi Kyle,

Ok, so I did as you suggested and looked at Bootstrap's scss for the font-sizes. Below is what I found. Not sure why they would have named those values as they did. For example, say I have a class named .header-intro and I want the font-size to be 36px. I would not want my scss to show .header-intro { font-size: $font-size-h1; }. So, I can see the need to add the sass functions to get the desired sizes that I would need. But how would you suggest I name my variables for my font-sizes so that i can use it on any selector and or class? I do not think Bootstrap did a good job at naming their sass variables either (at least the font-sizes below).

$font-size-base:          14px !default;
$font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px

$font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
$font-size-h2:            floor(($font-size-base * 2.15)) !default; // ~30px
$font-size-h3:            ceil(($font-size-base * 1.7)) !default; // ~24px
$font-size-h4:            ceil(($font-size-base * 1.25)) !default; // ~18px
$font-size-h5:            $font-size-base !default;
$font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
0
 
asp_net2Author Commented:
Kyle,

Also, here are my default font-size sass variables names. Do you suggest I make changes to the names?

$font-size--base           : 100%;
$font-size--px-to-rem  : 16px;
$font-size--rembase    : 1rem;
0
 
asp_net2Author Commented:
Hi Kyle,

Ok, how could I get the font-sizes that I need based on using the font-size-base size of 16px using the "ceil" and "floor" function as bootstrap has done? So If I want certain sizes like 18, 21, 24, 36, 48, 60, 72, 90 how can I get those sizes by using what bootstrap has done by using ceil and floor?
0
 
Kyle HamiltonData ScientistCommented:
to get 18 you would do:

18/16 = 1.125

so:

base * 1.125 => 18

you dont even need a floor or ceil

i suspect you are over-engineering things, no?
0
 
asp_net2Author Commented:
Scott / Kyle,

Based on both of your input's I believe I may go with the format below. Can you both please tell me if this is a good idea for a Responsive Framework? If not, then please explain how I can make it better.

$base-font-size: 16px;
$h1-font-size: $font-size--px-to-rem * 4.5;
$h2-font-size: $font-size--px-to-rem * 3.75;
$h3-font-size: $font-size--px-to-rem * 3;
$h4-font-size: $font-size--px-to-rem * 2.25;
$h5-font-size: $font-size--px-to-rem * 1.5;
$h6-font-size: $base-font-size;
$p.intro: $font-size--px-to-rem * 1.125;

Then I created a module folder with a file called _typography.scss that will get imported which I house all typography elements such as a,p,h1-h6,ul,ol,dd,blockquotes.

_typography.scss file that will get imported:

h1 {
  font-size: rem($h1-font-size);
}
h2 {
   font-size: rem($h2-font-size);
}
h3 {
  font-size: rem($h3-font-size);
}
h4 {
 font-size: rem($h4-font-size);
}
h5 {
   font-size: rem($h5-font-size);
}
h6 {
  font-size: rem($h6-font-size);
}
p.intro {
  font-size: rem($p.intro);
}
0
 
Kyle HamiltonData ScientistCommented:
It's your framework, so you will have to see how it works out - I don't think anyone can you a yay or nay answer just like that. I believe to make a good framework, one must put a LOT of thought into it, and try LOTS of different things :) Go with it, see how it works, and make changes as you see fit.

Koza.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.