Responsive font sizing

Hello CSS Experts!  

I am working on a responsive website using twitter bootstrap (Joomla 3.x)

I'm using px for font sizing i,e.  20px  and am having weird results when the browser resolution changes.

The overall body text seems fine, but everything else becomes somewhat unpredictable as I change my "resolution" with my mouse.

I realize there are all sorts of philosophies regarding responsive font sizing,  I found this interesting article, that may be of relevance to this question:

HUBBERS BLOG re responsive font sizing.

In my next comment I'll give the link to the development site and show you some of the main issues I am having with fonts.

Thanks, as always,

Rowby
LVL 9
Rowby GorenAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GaryConnect With a Mentor Commented:
Personally avoid them.  If I need a fancy font then I'll just make an image.  You are relying on another site to make your site look fancy
If I was to choose then I would go with Google - at least the download should be fast and they have plenty of redundant servers if any fail.
0
 
Rowby GorenAuthor Commented:
Here's the link to the page.

Link to the test page

Here are the main issues.

At a wide resolution this css looks fine:
.allmode-default .allmode-topitem .allmode-title {
    color: #000000;
    font-family: Colaborate-ThinRegular,arial;
    font-weight: 100;
    letter-spacing: -0.5px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

Open in new window


But as you zoom in the font become bold and goes from webfont Colaborate-ThinRegular to arial.   The weight is much "bolder" at close resolution.  And the line height becomes much too "high".  Again, would percentages or another solution for font size and height and weight fix this?

Another area of fonts changing is this interesting problem.  

h2, div.contentheading resizes fine -- but div.moduletable._GalaxiesEtc h1 {  switches from the web font to arial when I zoom in.  When I zoom in it becomes controlled by h3 {
    font-size: 16px;
}

Those are the main issues, so far....

On a side note, I am wondering if using Google fonts rather than the site based web fonts would be a better solution because I am not seeing the web fonts on my android devices.  So I am wondering if web fonts are not good for androids and that google fonts would be better -- for the headline type fonts.  h1, h2, h3 etc.    But perhaps we may want to keep that issue out of this question???

Thanks!

Rowby
0
 
GaryCommented:
Well why are you using two different blocks of code to display at different resolutions?
The second block (H3) only has the Arial font
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Rowby GorenAuthor Commented:
Hmmm

Can you point out the line of css where you are seeing the "different resolutions-- second block....."

Thanks!

Rowby
0
 
Rowby GorenAuthor Commented:
I think I see what is going on here.  I forgot that I am using two different joomla modules for that portion of the page -- based on resolution.

The mobile resolution module is kicking in.

I guess this is where I would need to specify the web  font for the narrower resolution(s)?

div#OurGalaxiesHASOMMobile {
    float: left;
    margin-right: 20px;
}
0
 
Rowby GorenAuthor Commented:
I did some "fixes" to the mobile group of fonts -- and now I"m seeing the webfont in my mobile devices.

The fonts need to be resized for the mobile - type resolutions -- not 100 percent sure what would be the best values to put where.  

Rowby
0
 
GaryCommented:
Why two modules/separate blocks of code?
Use the same block of code - end of story.
The css and html is so messed up its impossible to know where to start.
0
 
Rowby GorenAuthor Commented:
Hi Gary123,

You're right.  :)

I realize I mistakenly had those  two modules in the same position -- and to compound my mistake I gave them incorrect Responsive utility classes.  

I changed the correct module to show  hidden-phone, so now it only shows up for Desktop and tablet.  

I changed  the second module to show in its correct module position and made it "visible-phone"

So those two "modules" are under reasonable control, except for some font styling which I can do myself.  So that issue we can mark "Fixed!"

The other issue in this question are the "headlines" under News/Events.  

At wide resolution the "Headline Fonts" (i.e. "...appointed Interim Director..." has non-bold looking fonts.  And that's how I want them to be.  

But if I use my mouse and "zoom in" on those headlines they appear to become very bold.  I am using font-weight: 100;    I tried changing the font-weight to other values but they don't seem to fix it.

How can I keep those headlines from becoming bold when "zooming" in -- or I assume when someone is using an older computer that has a screen with narrow resolution?

The controlling css appears to mainly be:

.allmode-default .allmode-topitem .allmode-title {
    color: #000000;
    font-family: Colaborate-ThinRegular,arial;
    font-size: 20px;
    font-weight: 100;
    letter-spacing: -0.5px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

Open in new window


Thanks!

Rowby
0
 
GaryCommented:
Don't look bold to me, it's probably just the way your browser is rendering the zoomed font.
The more you zoom the more width the font will be given.
What is the purpose of this checking what the site looks like zoomed?
0
 
Rowby GorenAuthor Commented:
I am "zooming in" because one of the people at the college, who is reviewing the test site made this comment:  

" the darkness of the news headlines overpowers the text underneath, especially because the text underneath is so small (btw, I am not asking to increase the size of the text underneath). It seems that you increased the size of the headlines on the news events AND made them darker. That is just too much, in my opinion."

I am thinking that she is looking at the site with an older computer that has "narrower resolution".  I can call her tomorrow and try to get her display specifics.

However perhaps this is the problem....

I  looked at the live site (which I am attempting to recreate, but in a responsive upgraded version of Joomla) , and see this via firebug.  I am wondering if in my development site that ColaborateLightRegular etc are not being properly referenced.  And because of that  is showing arial instead of colaborateLIghtRegular.....

@font-face {
	font-family: 'ColaborateLightRegular';
	src: url('fonts/ColabLig.eot');
	src: local('ColaborateLight Regular'), local('Colaborate-Light'), url('fonts/ColabLig.woff') format('woff'), url('fonts/ColabLig.otf') format('opentype'), url('fonts/ColabLig.svg#Colaborate-Light') format('svg');
}

@font-face {
	font-family: 'Colaborate-RegularRegular';
	src: url('fonts/ColabReg.eot');
	src: local('Colaborate-Regular Regular'), local('Colaborate-Regular'), url('fonts/ColabReg.woff') format('woff'), url('fonts/ColabReg.otf') format('opentype'), url('fonts/ColabReg.svg#Colaborate-Regular') format('svg');
}
@font-face {
	font-family: 'Colaborate-ThinRegular';
	src: url('fonts/ColabThi.eot');
	src: local('Colaborate-Thin Regular'), local('Colaborate-Thin'), url('fonts/ColabThi.woff') format('woff'), url('fonts/ColabThi.otf') format('opentype'), url('fonts/ColabThi.svg#Colaborate-Thin') format('svg');
}

Open in new window

I have not been including the live site link in this question but here it is  Live site trying to match -- but responsive etc.

When I "zoom" in and out of that page, the font does not get bolder.   I'll check the page via another computer and see if I have the same "bold/zoom" problem.
0
 
GaryCommented:
I don't see any boldness going on with the text
0
 
Rowby GorenAuthor Commented:
I don't see any boldness going on with the text

Then I want to confirm that you are seeing the "Colaborate" font and not arial.

Because I am still thinking that the web font group of fonts called "Colaborate" is not being properly referenced in my test / development site.

Thanks!

Rowby
0
 
GaryCommented:
Yep it's that font
0
 
Rowby GorenAuthor Commented:
Ok.  I will contact site reviewer and try to clarify issue with her. I will see her tuesday.  S hmmo stay tuned.
0
 
Rowby GorenAuthor Commented:
Hi

I did some more testing and determined that the web font ColaborateLightRegular was not being referenced properly.  The family of fonts is in a folder on the website, and without it being reference it apparently reverted to arial -- which was causing my so-called "bold" issues.

Now if you go to the site, and "zoom in and out" you will see that the font resizes and matches the live site...

@font-face {
  font-family: 'ColaborateLightRegular';
ETC ETC

Maybe it didn't look bold to you because possibly you have ColaborateLightRegular on your local machine?
0
 
GaryCommented:
Not installed on my pc, maybe already downloaded from your site...
0
 
Rowby GorenAuthor Commented:
Yup.   Once I go over the page tomorrow (tuesday)  at the client's own computer and see all is okay from her POV then I'll close the question and award the points.

Thanks for helping me troubleshoot this issue!

BTW do you like Google fonts as an overall font solution -- for example as opposed to web fonts.  (I don't plan on using any google fonts on this site, but would welcome your opinion for future sites....) :)

Rowby
0
 
Rowby GorenAuthor Commented:
I  agree.  And if it is a popular Google font than hopefully it will have been already downloaded to "many users" local computer.

At some point I hope to replace the "web fonts" -- but for now the client wants to match the live site which uses the web fonts.  

In any case all seems to be working fine now.

Rowby
0
 
Rowby GorenAuthor Commented:
Thanks. Was at the client yesterday and it looks fine on her computer.

Rowby
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.