In the days of letterpress printing, foundry type and Linotype matrices came in a limited range of sizes, and a “font” was defined as one size of one typeface design in a single style, like 12 point Baskerville Italic, although if you ordered Linotype matrices, they would usually feature both the Roman and the Italic style on each mat, or both the Roman and the Boldface style. Extra mats, or “sorts,” were required for the accented letters that were needed for setting type in French, German, Spanish or Scandinavian languages, for example.

Most printers would order their foundry type, or matrices for their Linotype magazines, in the sizes they judged most versatile and important for the day-to-day needs of their major customers. Since buying a full case of type or a full set of matrices was very expensive, it was rare to see odd-numbered point sizes above 11 point. Typically, the larger sizes of foundry metal type would be limited to 12 point, 14 point, 18 point, 24 point, 30 point, 36 point, 48 point, 60 point and 72 point, in the font families judged to be most essential for their shop’s needs. By no means would many print shops possess all possible sizes that might have been available from the type foundry.

The restricted range of sizes initially carried over into photocomposition, although later-model phototypesetting machines offered varying sizes in very small 1-point or half-point increments. With the advent of Macintosh desktop publishing, software like Aldus PageMaker, Quark XPress and InDesign enabled even finer adjustments to type size, though at some cost to traditional æsthetics.

The reference to 16-point type is likely a reference to default point sizes in computer web browsers, and is a bit of a misnomer since it refers to characters intended to fit on a 16-pixel-high body, which might manifest as apparently 12 points high or apparently 16 points high, depending on differing screen resolutions from different manufacturers. Now that HTML5 and CSS are ubiquitous and have universal support on modern browsers, point-size measurements should be restricted to documents intended for printing. The use of points or pixels is deprecated for on-screen use, since these units will not look the same on Macintosh, Windows or UNIX systems and do not scale up or down for visually impaired people or for mobile devices. Using em units or percentage units within the CSS style definitions instead provides a more consistent appearance across various operating systems, browsers and screen resolutions. I hope this helps

I don’t know if they’re really going to have an impact, but I respect the goal of this initiative. Our technologies generally have accessibility problems for those with visual difficulties. And even for those of us lucky enough to not have vision problems, we can end up with some fatigue, blurred vision, headaches and more.

I’m not a typographist, but as a UX designer, I find myself often wrestling with others on this topic. I tend to be pushing for larger fonts and more inclusivity while those who tend to think about design ego-centrically push for smaller fonts. Smaller text can appear more attractive to well-sighted people, but when we make this choice we sacrifice a lot.

This is going to sound flippant, but it really isn’t… Ask the user!

There is no “standard”, per se. All about the audience. Young audiences, old audiences, or websites specifically aimed at audiences who may be hard of sight will require larger than “average” type to get the job done

Large bodies of text should similarly be larger type, generally speaking, to make tracking and reading easier on the eye. If the text is broken with diagrams and images, perhaps that requirement reduces a little.

Contrast, of course, will also have a part to play

Then there’s the balance between form and function. For certain sites, the aesthetic might dictate a size that could be “sub-optimal” in other more pragmatic contexts.

As with all UX, at the base level, it is about gathering and understanding the user requirements and putting that user at the centre of your design thinking, with your interpretation and iterations tested against the cohorts you are designing for.

Of course, there are nuances to consider, where cohorts or stakeholders have conflicting requirements, but that’s a long post :)

How can multiple fonts be used on one page without making it look messy and unprofessional (web design)?

“Multiple fonts … on one page” will make any type of page, virtual or physical, look extremely “messy and unprofessional”.

Printing was first invented to make book copying quicker than using handwriting. Your own handwriting only uses one font, even though it will use different sizes and weights. A document created by several scribes, all with radically different handwriting, will look far more “messy and unprofessional” than a document created by a single scribe. Printing seeks to emulate this.

Sticking to one single font is something William Caxton had worked out by tea-break on the first morning!

I’m not a typographer, but IMHO, pixel based measurements for UI/web design need to go away 15 years ago.

Every even remotely modern monitor reports its dpi and native pixel dimensions (and thus size) to the OS.

Measurements can and should be given in either “real” length units (like mm, inches, typographic points – hell, nanofurlongs, for all I care) or percentages relative to screen size. Or, on websites, as deviations from the “standard size” – which the user sets.

HTML and CSS not only support that, but intended it to be the standard way of specifying (text and some other elements’) sizes since the very beginning. The only reasons absolute pixel values became commonplace are, bluntly put, graphic designers’ egos and unwillingness to adapt their toolsets/workflow to a different medium, crappy “Web Design Suites” and generally idiots “designing” “websites”.

And there should be an easy, standardised and universal way for the user to tell the system whether they want “standard size” or larger/smaller elements on screen without it breaking all sorts of things (no, simple zoom doesn’t work for that. The apps or toolkits need to support it.), not only for text or websites but everything.

How large, proportionally, I want my UI elements, text etc. to be varies with tons of variables. If I’m sitting right in front of a 30″ monitor, I want smaller elements then when that same monitor is sitting 3m away from me, for example.

The OS or app can’t know that, unless I tell them. Some toolkits / GUIs do support this, up to a point – but I haven’t seen one where it works consistently and easily, yet.

Personally, I’ve done it multiple times. However, no publisher will ever authorize such a book, as its the publisher’s (i.e. their minions’) job.

However, in my case, since I publish independently, I not only write, format and create the novel, I also create the covers myself, I face no such limitations. Thus, in my case, I’ll often create each chapter title using the some unique custom-designed font (representing the nature of the story) that I used on the cover. (Note: this requires a separate license, as it’s almost impossible to change the fonts in any book, given the restrictions for each unique device they’re viewed on). So, rather than installing the font itself, you create ‘transparent’ .pgn files, so it’ll match whatever display it’s view on, and get a cheaper ‘desktop’ license, which only includes showing, not actually installing, the license.

Still, whatever you’re trying, do not adjust font sizes. In fact, when authors start using different fonts, different sizes, alternating between italics, bolding, and underlining; or using a single punctuation character multiple times, it’s a red-flag for readers that the author has no clue what he’s doing.

So, as always when writing, Do your due Diligence, and do the necessary research first! There are specific techniques and ways of implementing these things, so trust the experts, until you learn enough to actually know better yourself. Although I experimented a lot, most of my initial covers were terrible, until I finally learned how to properly use custom font designers’ work.

A font is what you use, a typeface is what you see. A typeface, e.g. Times Roman, might have a number of fonts available such as the basic 4: Roman, italic, Bold, Bold italic

For all practical purposes, the only system you need to know is the American modern/digital version: Type measurement unit is POINTS, and 72 points is one inch and 12 points is a Pica. Type can called by a mix of points and pica or just points. Normally, the default size in most applications is 12 points or 1 Pica. A 16 point type can be called 1p4 or 16pt. Type is made in a box called em box; it has nothing to do with the letter M.

So, a 12pt font is going to be in a box that is 12pt square. But, there is no standard for what happens in the box!

As you can see, below are THREE different typefaces, each with ONE font and almost none of the heights are the same! unit is points.

The whole delineation between what is and is not considered a mobile
device is quite fuzzy. And actually, this notion of desktop site vs. mobile site
isn't something that's inherent to the web—it's a construct that we are
imposing, and the problems associated with it are evident. I feel like we're at a point where it no longer makes sense to design non-responsive sites.

So should responsive sites be used in place of separate mobile sites? I say yes, so long as you can design/build responsibly. That means using progressive enhancement, considering page load time, and being generally conscientious about the assets you're downloading and the number of server requests you're making, etc. It also means not trying to force or retrofit a big screen layout into a tiny screen. By doing this you would potentially be missing out on opportunities for functionality that handheld devices afford.

There is still a case for separate mobile templates, but once you begin changing the UI, content, and site architecture for users based on their device, you are treading on thin ice. What looks and functions well when designed specifically for an iPhone in portrait view, may not adapt so well to other mobile devices...for example a Samsung Galaxy Nexus in landscape orientation. Both are technically "mobile" devices but they feel totally different. So will the same mobile UI fit both? But to even serve up the mobile UI, you'd need to detect the users' device, which will probably require user agent sniffing. This isn't necessarily bad, but it does introduce additional complexity.

Of course one way to circumvent the risk of accidentally sending people to a mobile site when then they want the "full" site, or vice versa, is to prompt the user to decide with the ridiculous proposition, "Would you like to view the mobile version of our site (or the full desktop site)?" I fail to see how offloading a decision which affects the IA, UI, and content of the website onto a user who may have no familiarity with your site is much of a strategy.

At any rate, there are problems you encounter either route you choose, but it seems to me that thinking responsively during the design process will save you and your users a lot of frustration in the long run.

Your goal is to sell your Web development and SEO services and you mention in a comment that many of your prospects will come to the site after meeting you and getting your business card.

Your site must therefore showcase the services you offer, demonstrate that you are capable and will be a good fit for their needs, and help you close the sale by converting these prospects into clients.

The design elements on the page should reinforce this messaging while not detracting from it. Will this type effect reinforce your message?

Motion draws the eye. So the eye will be drawn to “We Are “Web developers”, “Web consultants”, “effective communicators.”

Is that the most important message on the page? I don’t think it is. It answers the question of who you are, but it doesn’t explain how you will help your clients. Will seeing this effect distract them from other more important messages on the page? Will it look as dated to prospects as it does to the developers who’ve told you its no longer 1997?

Bells and whistles are sometimes useful, but they often detract from an otherwise clean design. Without seeing what it looks like I can’t say if this will be a bad idea or not, but it does have the potential to be distracting. Try it out as you design and try some simple usability testing. Get some friends to take a look at the site and ask them questions about the page. That will help you decide if this effect helps or harms.

I love Google Fonts. You can browse them and sort them by popularity or by trending (or alphabetically of course). You can filter them by category, thickness, slant or width.

Traditionally, screen type tends to be sans-serif versus the serif type of print. The readability difference has to do with the way they are produced. Traditionally, serifs were harder to read on screens because the resolution was poorer (72 ppi) and screens emit light. Serifs were easier to read on print because the resolution is much higher (approximately 300 - 2400 dpi for single colour or black ink). That changed for a bit with HD and Retina displays (200 - 400 ppi) and serif fonts came back in style for websites, at least on Retina displays. I’ve sometimes seen serifs used for headers and sans used for paragraphs, which is another reverse of what you might see in some printed magazines or newspapers. From what I can tell, there really aren’t any rules about font use anymore (other than, perhaps, overuse of fonts, too many font types, and such uses giving a cluttered and messy feel).

For websites, I personally like thin sans fonts with wide spacing (not condensed). I like to use lighter weights for titles (larger sizes) and normal weights for non-bolded paragraph text. I personally don’t care to use multiple font types (except perhaps in special box classes such as <pre>-formatted code), funky handwritten or comical fonts, and I tend to avoid serifs (call me a traditionalist). But that’s my personal choice. When designing for a client, it’s all about what best represents their brand and personality.

I stole this answer from stack exchange:

The "font size" of a font refers to the font's "em height", which isn't necessarily the same as the height of particular characters in the font.

Usually the em height of a font adheres to the same basic idea - it'll be roughly set to the distance from the lowest descender or accent (such as the bottom of the letter g) to the highest ascender (such as the top of the letter h):

As you can see, none of the individual letters cover that whole span.
With digital fonts, the "em height" of a font is a choice made by the font designer, and does not have to conform to this convention at all: a digital type designer can pick any foundation for their em size. However, fonts still tend to adhere, at least roughly, to the sort of convention described above. In old days when type consisted of metal blocks, the "em height" was the height of one of those blocks, which needed to be high enough not only for any character in that typeface but also for any ascenders, descenders, and accents.

Now, many modern typefaces include accents on capital letters too (such as Ć) - these accents extend outside what is traditionally thought of as the typographical ascender and thus these (and possibly other special characters) fall outside the top of the "em". For historical reasons we don't adjust the em size to allow these, we keep the em size and just have these extend out of it - any typographer using such accents will need to ensure there is space for them to extend into.

Now, even if a designer does follow a predictable convention for their em size, this still doesn't tell you the size of capital letters (cap-height) or the size of say an o (x-height or midline) as these can vary freely between typefaces in relation to the ascender height.

Within a font family, these will usually be consistent though. So for example, Times New Roman Bold and Times New Roman Regular will have the same character sizes for the same em size, which should include ascenders, descenders, cap-height and x-height.

Thanks for A2A!!

With this research in mind, let me ask: how many of your client’s readers are around 40? Because they have to work twice as hard to read as 20-year-olds. If they’re closer to 60, they have to work four times as hard.

Almost 1 in 10 of your readers also has trouble with their eyes. Of the rest who don’t, most will still have to strain to read text smaller than 16 pixels, even if they don’t notice that they’re doing it. (How often do you find yourself hunching over the screen?) And that’s if they’re leaning close, which they would likely find awkward and unergonomic. Their natural sitting position will be at least an arm’s length from the screen!

In short, for the average Web user, reading most websites is not unlike taking an eye exam.

The harder your text is to read, the less of it will get read — and the less of what is read will be understood. 10 pixels is essentially pointless. 12 pixels is still much too small for most readers. Even 15 pixels will turn off visitors who might have otherwise converted.

Thus, we can conclude that if you want the maximum number of people to read, understand and act on your text, then you need to set it at a minimum size of 16 pixels.

Hi…

There is no fixed size of featured images in wordpress.

Change Size of Featured Images

A lot of WordPress themes use featured images for certain theme elements like post thumbnails or image slideshows.

Default Image Sizes

Our themes usually define several image sizes for the featured images. WordPress will crop your uploaded image to all these sizes when you set a featured image. The theme will then use these different sized images on various locations in the theme.

For example, You upload and set a featured image of 1024 x 800 pixels. From that image, WordPress generates a thumbnail image with 85 x 85 pixels for archive pages, a 160 x 160-pixel image for single posts and a 800 x 400 pixel image for the featured posts slideshow.

Change Default Image Sizes

You can change the default defined image sizes with the Simple Image Sizes plugin.

You can download the plugin on wordpress.org/plugins/simple-image-sizes or simply search for Simple Image Sizes on Plugins → Add new in your WordPress backend to install the plugin.

After you have installed and activated the plugin, you will find additional image size settings onSettings→ Media. They are added below the default Media settings of WordPress Core.

Hope this answer is helpful.

Regards:

Walter A

It’s interesting that people fall deeply in love with fonts. If this is you, be careful. :) Why? You mention long articles. Using any kind of overly fancy font in a very long article is exhausting, and people will simply stop reading.

I just had a client who was madly in love with Garamond. It’s a gorgeous font, but its lovely little curves get compromised when being pixelated by a computer screen, so if you’re reading a ton of it, and it’s really small, it’s just not good.

Sometimes what seems like a boring font actually may be better for readability. Do you have trouble reading Quora? I’m guessing you don’t. Right now you’re looking at Georgia if you’re viewing on a desktop. It’s a pretty nice serif font, and though serifs just aren’t hipster at all, they can help with readability.

At mobile size they swap over to Helvetica. A sans serif font that’s overwhelmingly popular, and very readable. Both great choices for long articles, IMO.

What do you think of the font size here? It’s 15 pixels. Pretty easy to read. Go smaller than that and you will often exhaust your reader, especially at mobile size.

I suspect that all of us like some bizarro fonts. Go ahead and use some if you’re adventurous. Just keep them out of long articles. :)

How can you make font sizes dynamic in a webpage (I.e.: change on resize)?

Use vw units.

font-size: 5vw; 

View Width (vw) and its close cousin View Height (vh) allow the specification of size as a percentage of the viewport’s width or height. In the example above, the font-size will be set to a pixel height equal to 5% of the viewport width. Using this allows percent based layouts to scale roughly intact. There is little better for creating precision layouts that scale.

Support in older browsers is limited to non-existent, however. You’ll also need to pay extra attention to your breakpoints because a user can easily end up with an illegible font at low widths.

Here’s an example from W3C schools:
https://www.w3schools.com/csSref/tryit.asp?filename=trycss_unit_vw

Usually body { font-size: 16px; } will set a base font size that all of your styles can use. From there you can scale up or down using ems or rems, such as:

h1 { font-size: 1.75rem; }

For even more control, you can set different base font sizes using viewport-specific percentages, such as:

@media (min-width: 1025px) { body { font-size: 120%; } }
@media (max-width: 1024px) { body { font-size: 100%; } }
@media (max-width: 768px) { body { font-size: 80%; } }
@media (max-width: 375px) { body { font-size: 60%; } }

For all intents and purposes 100% = 16px = 1em, so if you wanted to set your base font size in pixels or ems you could, but percent seems to be the current best practice.

Google doesn’t use just one font of one size. It varies by content, what particular service you’re talking about, etc. However, the page preview text of a search result seems to be 12 pt.

I suggest something around 12 to 16 pt as the baseline for body text and something larger for headers. Less crucial information, such as copyright info in a footer, can be smaller but generally shouldn’t go below 8 pt.

As far as typeface goes, it depends on what kind of site/content you’re presenting. It should be readable (no wing dings or over-the-top cursive!). You should choose between a serif (Times New Roman) or sans serif (Verdana) font depending on content type if you’re having trouble deciding. More serious topics, such as news or education, are generally presented in serif fonts while things like entertainment tend to stick to sans serif. Many sites mix the two types together so that there’s a clear split between different aspects; Quora for example uses a serif font for questions but a sans serif font for the navigation bar, stats, tags, etc. Headers/titles can get away with more exotic fonts but the body needs to be something that requires no deciphering on the user’s end; Magneto is a fun font but you’ll give everyone a headache if they have to read your 5 paragraph product pitch in it.

You can either embed a font file into the website to use a custom font, or pick a font that is readily available on the majority of devices (think those default fonts in Microsoft Word). Google mostly uses a custom font called Roboto. Also, stay away from “controversial” fonts like Comic Sans or Papyrus, and don’t choose something that was designed with a completely different aesthetic in mind; Broadway for a college’s acting club but not a fitness blog, Playbill for spaghetti western reviews but not economic news, etc.

I use body {font-size: 16px;} as part of my standard reset at the opening of any doc I plan to post as a site. From there I use ems for text size and rems for everything else. So, I guess my default text size for main copy is 16px.

Another way to handle this, and leave the decision entirely up to the viewer, is to set font size for the body as 100%. Then use ems and rems as above. This way body copy will display at whatever the user has set for a default size, and your adjustments for headers, strong, margins, line-height (for web I set line-height at 1.5, or 1.5 rem) and padding will all adjust automatically to fit that default size. This assumes you're using ems and rems instead of px for all your sizes.

The advantage of the percentage way (for main copy font size) is that it is tied to what the user has selected as it relates to their viewing device. It makes your layout adaptable to any pixel density, so long as the user has set their default font size appropriately.

It depends on your design, your typeface and how many heading levels you are likely to use. Also remember that the sizes will not look the same on all devices because different devices will have different resolutions. A 30px header will look smaller on a device with higher resolution than it will on a device with lower resolution.

Most browsers use a default font size of 16px for paragraph text. You might choose to do the same or you might wish to go a bit bigger and use 18px. I would start by choosing your paragraph size then determine appropriate header sizes based on that.

You might set your smallest heading to be the same size as the base font and then work your way up. This would be a very simple evenly spaced size-range:

h1 -28px

h2 -26 px

h3 - 24px

h4 - 22px

h5 - 20px

h6 - 18px

Although I showed the above in px, I would actually use em or rem rather than px for sizing. Set a main font size in px in your body, then use rem/em. font-size explains more about that, but here is an example:

body {font-size: 18}

h3 {font-size: 1.5rem}

Headings are ranked by importance rather than size.

An h1 heading is the most important and an h6 is the least important. But that doesn’t always mean that their sizes will progress from largest to smallest. That depends on your design. You might have a situation in which you choose to make an h3 larger than an h2. I’m working on a site now where I use the same size for h2 and h3 but they use different fonts and colors. All of my headings use one font except for h2 and h5 which use another font. My h1 is 2.4rem and my body uses a font-size of 20px.

There is no ideal size. You want your paragraph font size to be big enough for most people to read. (Including people age 35 and up who may be farsighted.) You want your headings to stand out. This can be done with size, or weight or color.

If you’ve got a good sense of design, then you should figure out what works as your are designing the site. But if you are still learning, it might help to read more about typography. Butterick’s Practical Typography is a good starting point.

Unica One Font is a decent, and eye-catching look fonts that work effectively for websites. That was designed and shared by Eduardo Tunni. It has come in a single style.

“I use fontstera to download it for free. They are providing it without any hustle"