Deciding Between Verdana and Arial: Adjusting Font Sizes with CSS

I have a preference for the font Verdana with a font size of 0.85em. However, I am worried about its availability on different devices. As an alternative, I'm considering using Arial at a font size of 1em instead.

font-family: arial; font-size: 1em

The challenge arises when trying to set both fonts together:

font-family: Verdana, Arial

Do you have any recommendations on how to address this? Is Verdana widely available on most devices now? Ideally, I would like to specify in my body to use Verdana at 0.85em or Arial if Verdana is not supported.

htmlcssfonts

Answer №1

According to Diodeus, it is considered safe to utilize these fonts as they are widely accessible. However, an alternative option is to make use of the CSS 3 font-size-adjust property. This feature allows for a relative resizing factor to be applied in situations where a fallback font is used instead of the preferred font.

Although this property may not be universally supported by all browsers at present, it is advisable to consider incorporating it into your design. It is possible that support for this functionality could improve in the future.

Answer №2

You can rest assured with that choice. For more information, visit:

Answer №3

Findings from the survey reveal that:

It was determined that Verdana has an overwhelming approval rating of close to 100% and is recommended for use.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Mobile-Friendly Centered Navigation Bar with Scroll Functionality Using Bootstrap 4 Alpha 6

Currently, I am working with the standard Bootstrap navbar that has the class="justify-content-center". My goal is to make this navbar scrollable when the elements do not have enough space. The issue I'm facing is that I can only scroll to the right a ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-4

Determining the position of the selected option in an Angular 2 Select menu

Is there a way to retrieve the position of the selected option in a similar manner to the index of a table? Example for a table: <tr *ngFor="let car of cars; let i = index" (click)="showTabs(i)"> <td>{{i+1}}</td> </tr> I am lo ...

htmlangular

I'm having trouble figuring out how to activate the active state for a navigation bar

Having trouble changing the icons' state when they are clicked on. This navigation bar is being imported from different files. Here is my code for the navigation bar: .nav { position: fixed; top: 88%; left: 12.5%; right: 12.5%; width: 7 ...

htmlcss

Issue with CSS Scroll Bar

I recently incorporated an Accordion and Slideshow feature into my website located at However, when clicking Play on either feature, a scroll bar unexpectedly appears causing the page to shift. I suspect that I may have forgotten to set the height for a ...

csspropertiesheightscrollbar

Navigating through a predetermined list of HTML pages with next and previous options

Hey there, I'm in a bit of a quandary at the moment. I've been searching on Google for quite some time now, but unfortunately, I can't seem to find what I'm looking for. Hopefully, you guys can lend me a hand. What I'm trying to d ...

javascriptjqueryhtmlarrays

Navbar with Bootstrap 4, Button Group on the right side with a horizontal dropdown menu

Currently facing a strange and frustrating challenge while working on transitioning code from Bootstrap 3 to Bootstrap 4. Specifically, I am dealing with a navbar that includes a button group on the right side (containing user name, login options, etc). T ...

cssbootstrap-4

Organizing content with divs in HTML/CSS

I've incorporated a theme in my designs where there is a blue bar beneath the text, like shown in the images below https://i.sstatic.net/TuVGd.png https://i.sstatic.net/CCJRo.png Currently, I've been structuring my HTML for these bars in the f ...

htmlcsstwitter-bootstrap

A guide on implementing Flex Direction in React

For my latest project, I decided to create a web page using Cards in React. To achieve this, I utilized React Bootstrap for the card components. However, I encountered an issue with setting the flex property. Below is a snippet of my component: import &ap ...

cssreactjsbootstrap-4react-bootstrap

Turn off drag and drop functionality and activate selection in HTML

Recently, I encountered a strange issue where selected text became draggable and droppable onto other text, causing it to concatenate. To resolve this problem, I added the following code: ondragstart="return false" onmousedown="return false" However, thi ...

javascripthtml

Issues with functionality arise when cloning HTML divs using JQuery

VIDEO I created a feature where clicking a button allows users to duplicate a note div. However, the copied note does not function like the original - it's not draggable and changing the color of the copied note affects the original note's color. ...

javascripthtmljquery

The integration of jquery datepicker with MVC in Visual Studio 2013 allows for seamless

I recently started developing an application in Visual Studio 2013 using MVC. I am currently working on implementing a jquery datepicker to show up whenever there is a DateTime field involved. My controllers are being created through scaffolding templates. ...

jquerycssasp.net-mvc-4datepicker

Is there a way for me to generate a tab that shows content when hovered over?

Is it possible to create a tab that displays a vertical list of redirections when the mouse hovers over it, and hides when the mouse is moved away? This seems like a challenging task. Can someone guide me on how to achieve this, especially if it involves ...

c#javascripthtmlcss

Split-button dropdowns within tabs implemented with Bootstrap

I'm looking to create a navigation menu that combines both split buttons and dropdown tabs. I've found examples of each individually, but can't figure out how to merge the two: "Tabs with dropdowns" Is it possible to have a tab with a drop ...

htmlcsstwitter-bootstrap

The function in jQuery that can be used to hide a <div> when clicked

I am facing a problem with my jQuery code that is supposed to remove/hide a specific div. Despite checking various examples, I can't seem to make it work properly. This issue arises in the context of jQuery on Drupal 7. The live site where this proble ...

javascriptjqueryhtmlcss

AngularJS static list with dynamically changing content

Seeking inspiration on creating an AngularJS information monitor with a maximum of 6 rows. The display should show new rows at the top, pushing out the oldest row from the bottom when there are already 6 rows visible. Rows can also disappear unexpectedly. ...

javascriptjquerycssangularjsangularjs-directive

Unresponsive Vanilla Bootstrap Navbar Links

I recently started working with the vanilla version of Bootstrap to create a universal template for a friend's websites. Although I have previous experience with Bootstrap and have never encountered any issues, I am now facing a problem. I want to cla ...

javascriptjqueryhtmlcss

Choose a table by using jQuery excluding the data in the first column

Does anyone know how to extract data from an HTML table using jQuery? In my specific case, I need to retrieve the table contents without including the first column. This is because I want to export the table to an Excel file, but the first column contains ...

javascriptjqueryhtml

Switching CSS styles - seeking a smoother integration

I have successfully implemented a JS CSS switcher, which works brilliantly. However, I would like it to function more seamlessly. When opening a new page on the site, the default CSS style sometimes flickers briefly before the selected CSS style is reappli ...

javascripthtmlcss

When the parent container is given a specific height, the Flexbox item on iOS 9 appears to be shrunk down

Encountering a bug on iOS version 9 while using the latest Bootstrap 4 Beta. The issue involves a parent div and ul element with multiple list items. The parent div is a flexbox with set dimensions and overflow enabled for child elements. The list item sho ...

cssflexboxios9twitter-bootstrap-4

Struggling to properly align a div on top of an image

view image description herei need assistance with centering the div over the background image. I attempted to use relative positioning for the container and absolute positioning for the elements, but it did not yield the desired result. The code snippet be ...

htmlcss