Solved

Responsive font sizing

Posted on 2013-10-27
19
404 Views
Last Modified: 2013-10-30
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
0
Comment
Question by:Rowby Goren
  • 12
  • 7
19 Comments
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604138
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
 
LVL 58

Expert Comment

by:Gary
ID: 39604167
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604189
Hmmm

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

Thanks!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604215
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604245
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
 
LVL 58

Expert Comment

by:Gary
ID: 39604435
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604554
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
 
LVL 58

Expert Comment

by:Gary
ID: 39604581
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604599
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 58

Expert Comment

by:Gary
ID: 39604606
I don't see any boldness going on with the text
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604618
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
 
LVL 58

Expert Comment

by:Gary
ID: 39604621
Yep it's that font
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39604690
Ok.  I will contact site reviewer and try to clarify issue with her. I will see her tuesday.  S hmmo stay tuned.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39605683
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
 
LVL 58

Expert Comment

by:Gary
ID: 39605946
Not installed on my pc, maybe already downloaded from your site...
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39606053
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39606107
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
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39606194
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
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39613215
Thanks. Was at the client yesterday and it looks fine on her computer.

Rowby
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
spacing 5 57
css, html 6 51
P tag not forcing line space 2 23
Put shading on half of picture 8 28
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now