How to determine font sizes on web site

I am trying to determine the optimal font sizes for my web site. I look at various web sites
I see text sizes (H and P tags) that i like and want to determine their sizes.

If i open Safari / develop / show resources pages of the site I do not see how the tags are defined in all the code.

Not being a coder, I can see em sizes for emoji and pixel sizes for images but not ems, % or pixel sizes of the tags.

I thought the show resources would provide this info.

Thank in advance.

Rich

Not sure if this would help, but it does me. That’s why I made it. :slight_smile:
http://armingchampions.com/Texts

1 Like

I realize this isn’t the exact question but I thought it would be useful as well.

When I need to quickly see what a font size is on a website I’m visiting I use What the Font extension for Chrome browser.

It provides font details very quickly. Quicker and less obtrusive than a typical css inspection.

Another tip is to use the Google Fonts page to help give you make font decisions.

You can edit the text and apply that text to every font on the page. Even if you aren’t using Google fonts you can still use similar font styles to help in decision making.

1 Like

Setting font sizes for all breakpoints is easy. Depending what kind of font you are using, and basically you need to start from P tag size. Am always using 16 or 18px.

And using https://type-scale.com/ as a calculator.

Try it :smiley:

5 Likes

good one @rusmir …bookmarked!

1 Like

Thanks @KBConcepts and @Whittfield your input was very helpful. I have been using Safari mainly for the bookmark synch with other devices but I think i will explore Chrome.

I found this blog page which helped me as well.

https://learnui.design/blog/why-beginning-designers-dont-need-grids-type-scales-color-theory.html#type-scales.

The author states start with legible text and use the “golden ratio” of 1.62 of successive em size type fonts. Briefly looking at the “Type scale” site it has golden ratio and other calculations.

The article had some other interesting insights for non web designers.

Thanks again for the input.

Rich

I use this website to determine what my Blocs designed websites look like. Yes, including the Fonts.
http://www.responsinator.com/?url=armingchampions.com%2FTexts%2F

There is this website that can help: www.layoutgridcalculator.com/typographic-scale/

1 Like

I am getting around to selecting fonts and font sizes and trying some of the suggestions in this post. @Whittfield suggested a WhatFont Safari Extension. Since it works as an extension it seemed like a good first look solution.

Tonight I DL’d it from the App Store and installed it. After installation I got this message box stating all the permissions that I “granted” this app / ext. I have never installed any extensions to Safari and was surprised to see this notification.

This was from the app store but I did not get any message stating it was an app and ext nor did I “grant” any permissions.

I deleted this immediately. Before I could uninstall the extension I got a prompt stating that I had to first delete the app.

For what it is worth I am posting this.

Rich

I have uninstalled and reinstalled the chrome version which I use and it doesn’t have a prompt for me to grant permissions. I also don’t have the same message as you in my settings.

take a look.

Extensions%202019-04-18%2021-33-27

I’m not sure why just yet, but I just don’t see the same thing nor have the same install prompt so I’m not sure what to say. I have used it for a long time and it’s got over 1.1 million users and over 1700 reviews. That doesn’t mean it couldn’t be a risk, but I’ve found no mentions in the comments about any issues as well. That’s a bummer.

I’m sorry that one didn’t work out. :thinking:

On my Mac I have installed the extension in Chrome for a long time and it works perfectly.

I never installed it in Safari.

I have the Mojave OS version 10.14.4

What version of macOS do you have on your Mac?

Hey KB - Could you describe how you use this website? Since the site asked for a http:// url, does your website need to be live to use this tool? Or is there a way to use the bloc browser preview local:host to check. Thanks!

This is a better place to check
http://www.responsinator.com/?url=armingchampions.com%2FTexts%2F

1 Like

@Wam @Whittfield
I am also using Mojave 10.14.4. I wasn’t suggesting the app doesn’t work.
The screen shot that I provided was taken after I installed the extension.

If you DL the free What font app from the Apple App store it installs successfully. You have to enable the extension before you can use it.

To do so you click on Safari preferences - you get a tab bar. The screen shot shows those
areas. Clicking on Extensions tab reveals my concern with the app claiming these permissions.
The app after installing gives itself the ability to read from all web sites sensitive information from web pages, passwords, phone numbers and credit cards. Reading that induced a shiver.

Apparently you do not get the same info from the Google Store. @Whittefield mentioned 1,700 reviews on Google app store the Apple Mac store has 10 reviews with a 4.5 rating.

I have no idea where to check permissions on OSX. So I contacted Apple Support this afternoon.

I spent over an hour on the phone with Apple regarding this. They kept asking me questions about the screenshot and finally agreed to let me send the screenshot. It was escalated three times during our conversation. They could not believe what they were seeing which was my reaction.

They assigned a senior technician help me “scrub thru the machine”. It appears that my machine is clear of any virus’ malware and other installs. They made it clear that once this was complete the case is closed and I will not know what happens with the developer since it is another case with the App Store and developer.

My sole purpose was to share what I saw regarding this extension with the forum and those that provided me with help regarding my request.

Rich

1 Like

Thanks for posting back @etdronehome, I appreciate knowing whatever you find.